可调整大小的画布（JQuery UI）答案

【问题标题】：Resizable Canvas (JQuery UI)可调整大小的画布（JQuery UI）
【发布时间】：2010-12-30 23:14:47
【问题描述】：

任何 DOM 元素都可以根据此页面调整大小：http://jqueryui.com/demos/resizable/

但是，这似乎不适用于 CANVAS 元素。可能吗？

【问题讨论】：

欢迎来到 StackOverflow。第一个问题很好！

标签： jquery canvas resizable

【解决方案1】：

Canvas 有两种调整大小的行为：

调整内容的拉伸位置以适应画布的新尺寸
在画布增长或缩小时调整内容保持静态的位置

这是一个演示两种“调整大小”的页面：http://xavi.co/static/so-resizable-canvas.html

如果您想要第一种类型的调整大小（拉伸内容），则将画布放入容器 div 并使用 CSS 将画布的 width 和 height 设置为 100%。该代码可能如下所示：

/* The CSS */
#stretch {
    height: 100px;
    width: 200px;
}

#stretch canvas {
    width: 100%;
    height: 100%;
}

<!-- The markup -->
<div id="stretch"><canvas></canvas></div>

// The JavaScript
$("#stretch").resizable();

第二种类型的大小调整（静态内容）是一个两步过程。首先你必须调整canvas元素的width和height属性。不幸的是，这样做会清除画布，因此您必须重新绘制其所有内容。这是执行此操作的代码：

/* The CSS */
#resize {
    height: 100px;
    width: 200px;
}

<!-- The markup -->
<div id="resize"><canvas></canvas></div>

// The JavaScript
$("#resize").resizable({ stop: function(event, ui) {
    $("canvas", this).each(function() { 
        $(this).attr({ width: ui.size.width, height: ui.size.height });

        // Adjusting the width or height attribute clears the canvas of
        // its contents, so you are forced to redraw.
        reDraw(this);
    });
} });

目前，当用户停止调整小部件的大小时，上面的代码会重新绘制画布的内容。可以在 resize 上重新绘制画布，但是调整大小事件经常发生，并且重新绘制是昂贵的操作 - 请谨慎使用。

【讨论】：

【解决方案2】：

关于使用这个，画布坐标系有一个有趣的怪癖：

#stretch canvas {
  width: 100%;
  height: 100%;
}

（来自上面的示例）

您必须使用这些 CSS 规则，因为您不能在画布的宽度/高度属性中指定 %。但是，当您尝试仅使用这些规则在其上绘制对象时，您会发现得到意想不到的结果——绘制的对象看起来被压扁了。这是上面的 CSS，带有画布边框...

    /* The CSS */
    #stretch {
        width: 200px;
        height: 100px;          
    }
    #stretch canvas {
        border:1px solid red;
        width: 100%;
        height: 100%;
    }

画布被绘制到正确的大小，并且正确实现了边框规则。在其他地方的代码中添加的蓝色矩形应该用 20px 的填充填充画布，但这并没有发生：

要解决此问题，请确保还为画布元素指定宽度和高度（在 HTML 中或在带有 setAttribute 的 javascript 中）：

canvas.setAttribute('width', '200');
canvas.setAttribute('height', '100');

或

<canvas width=200 height=100></canvas>

现在，当我刷新页面时，我得到了预期的结果：

这种“双重检查”将确保画布是使用正确的坐标系统绘制的，并且仍然允许通过 CSS 规则调整其大小。如果这是一个错误，我相信它会在适当的时候修复。

这只是提供修复，但您可以阅读更多内容here

【讨论】：

P.S.在最新的 Chrome 和最新的 Firefox 中测试，结果相同。

【解决方案3】：

那么为什么不在画布元素之前应用一个 div 并调整该元素的大小，当它停止时在画布中应用宽度和高度，然后重绘画布。

【讨论】：