可调整大小的画布（JQuery UI）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1977741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizable Canvas (JQuery UI)
提问by Joubert Nel
ANY DOM element can be made resizable according to this page: http://jqueryui.com/demos/resizable/
任何 DOM 元素都可以根据此页面调整大小：http: //jqueryui.com/demos/resizable/
However, it seems that this doesn't work for the CANVAS element. Possible?
但是，这似乎不适用于 CANVAS 元素。可能的？
回答by Xavi
Canvas has two types of resize behavior:
Canvas 有两种类型的调整大小行为：
- Resizing where the contents are stretched to fit the canvas's new dimensions
- Resizing where the contents remain static while the canvas grows or shrinks
- 调整内容拉伸位置以适应画布的新尺寸
- 在画布增长或缩小时调整内容保持静态的大小
Here's a page that demonstrates the two types of "resizing": http://xavi.co/static/so-resizable-canvas.html
这是一个演示两种类型的“调整大小”的页面：http: //xavi.co/static/so-resizable-canvas.html
If you want the first type of resizing (stretch the content) then place the canvas into a container divand set the widthand heightof the canvas to 100% using CSS. Here's what that code might look like:
如果您想要第一种类型的调整大小（拉伸内容），则将画布放入容器中div，width并height使用 CSS 将画布的和 设置为 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();
The second type of resizing (static content) is a two step process. First you must adjust the widthand heightattributes of the canvas element. Unfortunately, doing this clears the canvas, so you must then re-draw all its contents. Here's bit of code that does this:
第二种调整大小（静态内容）是一个两步过程。首先，您必须调整画布元素的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);
});
} });
Currently the code above re-draws the canvas's content when the user stops resizing the widget. It's possible to re-draw the canvas on resize, however resize events occur fairly often and re-draws are expensive operations -- approach with caution.
当前，当用户停止调整小部件大小时，上面的代码会重新绘制画布的内容。可以在resize上重新绘制画布，但是 resize 事件经常发生并且重新绘制是昂贵的操作 - 谨慎处理。
回答by DigiWongaDude
There's a bit of a funny quirk on the canvas co-ordinate system, with regards to using this :
关于使用这个，画布坐标系统有一些有趣的怪癖：
#stretch canvas {
width: 100%;
height: 100%;
}
(from the example above)
（来自上面的例子）
You have to use these CSS rules because you can not specify % in the canvas' width/height attributes. But you'll find you get unexpected results when you try to draw objects on to it using just these rules- drawn objects appear squashed. Here's the above CSS, with a canvas border...
您必须使用这些 CSS 规则，因为您不能在画布的宽度/高度属性中指定 %。但是，当您尝试仅使用这些规则在其上绘制对象时，您会发现会得到意想不到的结果 - 绘制的对象看起来被压扁了。这是上面的CSS，带有画布边框......
/* The CSS */
#stretch {
width: 200px;
height: 100px;
}
#stretch canvas {
border:1px solid red;
width: 100%;
height: 100%;
}
The canvas is drawn to the right size and the border rule is implemented correctly. The blue rectangle, added in code elsewhere, is supposed to fill the canvas with a 20px padding all around, but this has not happened:
画布被绘制到正确的大小并且边框规则被正确实现。在其他地方的代码中添加的蓝色矩形应该用 20 像素的填充填充画布，但这并没有发生：
To fix this, make sure you alsospecify a width and height for the canvas element (either in the HTML or in javascript with setAttribute):
要解决此问题，请确保您还为 canvas 元素指定了宽度和高度（在 HTML 或带有 setAttribute 的 javascript 中）：
canvas.setAttribute('width', '200');
canvas.setAttribute('height', '100');
or
或者
<canvas width=200 height=100></canvas>
Now when I refresh the page I get what I expected:
现在，当我刷新页面时，我得到了预期的结果：
This 'double-check' will make sure the canvas is drawn using the correct co-ordinate system and still allow it to be resized, via the CSS rules. If this is a bug, I'm sure it will be fixed in due course.
这种“双重检查”将确保画布是使用正确的坐标系绘制的，并且仍然允许通过 CSS 规则调整其大小。如果这是一个错误，我相信它会在适当的时候修复。
This is just about providing a fix, but you can read more in to it here
这只是提供修复，但您可以在此处阅读更多内容
回答by Anna Kalampokeleurou
Well why not apply a div before the canvas element, and resize that element, and when it stops apply width and height in canvas and then redraw canvas.
那么为什么不在画布元素之前应用一个 div，并调整该元素的大小，当它停止时在画布中应用宽度和高度，然后重新绘制画布。
