Question

我正在尝试更改由KineticJS framework创建的HTML5 canvas 元素的大小 - 也就是说，不是画布中的对象，但元素的大小。

由于jQuery .animate函数不能用于此事（它改变了CSS，我希望它改变元素的实际属性），我必须开发 my own function ，它使用KineticJS API提供的内部stage.setSize(width, height)功能。我根本没有编写动画功能的经验，所以我可能会完全错误地接近这种情况。

问题：它依赖于性能，因此通常不够快（感谢setInterval）。更不用说它仅部分适用于移动设备（iPhone 4S iOS 5.0.1测试）。任何解决方案都必须或多或少地完美地工作，即使在移动设备上也是如此。

我正在寻找改进此功能的不同方法。拍摄。

（对于那些没有看到我的代码链接的人; http://jsfiddle.net/G4nuH/ animateResize是相关功能。）

Answer 1

如果不知道最终应用程序的细节，我建议尽可能避免使用画布大小的动画。您可能知道，如果更改画布元素的大小，则存储在其上的所有内容都将被清除。这意味着动画尺寸需要您在每次迭代时重新绘制整个画布的同时逐步调整宽度和/或高度。对于桌面，这可能不是一个大问题。但是，移动设备将会很困难。

相反，我建议您通过增加容器元素的大小来伪造动画（带有边框，背景颜色等等，因此动画很明显）。然后，在动画完成后，将当前画布数据保存到临时对象，增加画布的大小，并将旧内容标记在其上。

如果您希望为画布尺寸设置动画以显示已存在于更大理论画布上的内容（即，用户有一个小窗口可以裁剪整个画布），那么最好不要使用CSS {{ 1}}和width以及height属性。使用这种方法，您将在所有绘制操作期间编辑完整的画布，但为视口大小设置动画将简单而流畅。

Answer 2

画布是图形的视图端口，它可以是文档的整个大小。您可以使用context.clip()函数来定义要显示的区域，而不是调整需要更新html框模型的画布大小。（你的表现问题！）

ctx.moveTo(162, 20);
ctx.lineTo(162, 320);
ctx.lineTo(300, 320);
ctx.lineTo(300, 20);
ctx.clip();

Answer 3

经过一番研究，我找到了自己的hacky解决方案。使用jQuery.animate的示例。因为KineticJS有几个背景层，所以必须为它们设置动画。

    //Gather all canvases
    var canvases = document.getElementsByTagName("canvas");

    //Animate their size
    for(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }

动画调整由KineticJS框架创建的HTML5画布的大小调整

3 个答案: