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

Question

我正在尝试更改由 KineticJS框架——也就是说，不是画布内的对象，而是元素的大小。

由于 jQuery .animate 函数不能用于此事（它更改 CSS，我希望它更改元素的实际属性），我不得不开发 我自己的函数，使用内部 stage.setSize(width, height) KineticJS API 提供的函数。 我根本没有编写动画函数的经验，所以我可能完全错误地处理这种情况。

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

我正在寻找不同的方法来改进这个功能。射击。

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

Answer 1

在不知道最终应用程序的具体情况的情况下，我建议如果可以的话避免使用画布尺寸的动画。您可能知道，如果更改画布元素的大小，存储在其上的所有内容都会被清除。这意味着动画尺寸需要您增量调整宽度和/或高度，同时在每次迭代时重新绘制整个画布。对于台式机来说，这可能不是一个大问题。不过，移动设备将陷入困境。

相反，我建议您通过增加容器元素的大小（带有边框、背景颜色等，以便动画清晰可见）来伪造动画。然后，当动画完成时，将当前画布数据保存到临时对象，增加画布的大小，并将旧内容印回其上。

如果您希望对画布尺寸进行动画处理以显示更大的理论画布上已经存在的内容（即用户有一个正在裁剪整个画布的小窗口），那么最好使用 CSS width< /code> 和 height 以及 overflow: hide; 属性。使用这种方法，您将在所有绘制操作期间编辑整个画布，但动画视口的大小将变得简单而流畅。

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

经过一番研究，我找到了自己的解决方案。使用 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);
    }