可调整大小的画布（JQuery用户界面）

Question

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

但似乎这并不canvas元素工作。可能？

Answer 1

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

• 重新调整，其中内容被拉伸而帆布增长，以适应画布的新尺寸
• 重新调整，其中的内容保持不变或缩小

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

如果您想要第一种类型调整大小（拉伸内容），然后将画布放入容器div，并使用CSS将画布的width和height设置为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上重新绘制画布，但重新调整大小事件的发生次数相当频繁，重新绘制是昂贵的操作 - 谨慎处理。

Answer 2

那么为什么不在canvas元素之前应用div，并调整该元素的大小，以及何时停止在canvas中应用宽度和高度，然后重绘canvas。

Answer 3

有一点画布坐标系上一个有趣的怪癖，关于使用此：

#stretch canvas { 
    width: 100%; 
    height: 100%; 
} 

（从上面的例子）

你必须使用这些CSS规则，因为您无法在画布宽度/高度属性中指定％。但是，当您尝试仅使用这些规则绘制对象时，会发现您会得到意想不到的结果 - 绘制的对象会出现压扁现象。这里是上面的CSS，画布边框...

/* The CSS */ 
    #stretch { 
     width: 200px; 
     height: 100px;   
    } 
    #stretch canvas { 
     border:1px solid red; 
     width: 100%; 
     height: 100%; 
    } 

画布被绘制到正确的大小和边界规则正确实施。蓝色的矩形，在其他地方的代码添加，是为了填补一个20像素的填充各地的画布上，但这种情况并未发生：

为了解决这个问题，请确保您也指定的宽度和高度为画布元件（无论是在HTML或与的setAttribute的javascript）：

canvas.setAttribute('width', '200'); 
canvas.setAttribute('height', '100'); 

或

<canvas width=200 height=100></canvas> 

现在，当我刷新页面我得到了我的预期：

这种“双重检查”会使用正确的坐标系确保画布绘制，并仍然允许它被调整，通过CSS规则。如果这是一个错误，我相信它会在适当的时候修复。

这只是提供修复，但您可以阅读更多内容here