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

Question

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

然而，似乎这对CANVAS元素不起作用。可能的？

Answer 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上重新绘制画布，但是调整大小事件会经常发生并且重新绘制是昂贵的操作 - 请谨慎处理。

Answer 2

在画布协调系统上有一个有趣的怪癖，关于使用它：

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

（来自上面的例子）

您必须使用这些CSS规则，因为您无法在画布中指定％＆＃39;宽度/高度属性。但是，当您尝试使用这些规则绘制对象时，您会发现意外的结果 - 绘制的对象看起来被压扁了。这是上面的CSS，带有画布边框...

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

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

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

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

或

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

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

这次＆＃39;仔细检查＆＃39;将确保使用正确的坐标系统绘制画布，并仍然允许通过CSS规则调整画布大小。如果这是一个错误，我相信它会在适当的时候修复。

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

Answer 3

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