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

Question

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

但是,似乎这对CANVAS元素不起作用.可能？

Answer 1

Canvas有两种类型的resize行为:

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

这是一个展示两种类型"调整大小"的页面:http://xavi.co/static/so-resizable-canvas.html

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

第二种调整大小(静态内容)是一个两步过程.首先,你必须调整width和heightcanvas元素的属性.不幸的是,这样做会清除画布,因此您必须重新绘制其所有内容.这里有一些代码可以做到这一点:

/* 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);
    });
} });

目前,当用户停止调整窗口小部件的大小时,上面的代码会重新绘制画布的内容.可以在调整大小时重新绘制画布,但调整大小事件会经常发生并且重新绘制是昂贵的操作 - 请谨慎处理.