可调整大小的画布(JQuery UI)

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

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

解决方法

画布有两种类型的调整大小行为：

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

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

如果您想要第一种类型的调整大小(拉伸内容)，然后将画布放入容器div中，并使用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();

第二种调整大小(静态内容)是一个两步的过程。首先，您必须调整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上重新绘制画布，但调整大小的事件相当频繁地发生，重新绘制是昂贵的操作 – 谨慎使用。

原文地址：https://www.jb51.cc/jquery/183074.html