jquery - 可调整大小的 Canvas (JQuery UI)

Question

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

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

Answer 1

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