任何 DOM 元素都可以根据此页面调整大小:http://jqueryui.com/demos/resizable/
但是,这似乎不适用于 CANVAS 元素。可能吗?
最佳答案
Canvas 有两种类型的调整大小行为:
- 调整内容拉伸(stretch)位置的大小以适应 Canvas 的新尺寸
- 在 Canvas 放大或缩小时调整内容保持静态的大小
这是一个演示两种类型的“调整大小”的页面:http://xavi.co/static/so-resizable-canvas.html
如果您想要第一种类型的调整大小(拉伸(stretch)内容),请将 Canvas 放入容器 div
中,并设置宽度
和高度
使用 CSS 将 Canvas 的比例调整为 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
属性。不幸的是,这样做会清除 Canvas ,因此您必须重新绘制其所有内容。下面是执行此操作的一些代码:
/* 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);
});
} });
目前,当用户停止调整小部件大小时,上面的代码会重新绘制 Canvas 的内容。可以在resize上重新绘制 Canvas 。 ,但是调整大小事件经常发生,并且重新绘制是昂贵的操作——谨慎处理。
关于jquery - 可调整大小的 Canvas (JQuery UI),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1977741/