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

【问题标题】：Animate resize of HTML5 canvas created by KineticJS frameworkKineticJS 框架创建的 HTML5 画布的动画调整大小
【发布时间】：2012-02-20 01:02:57
【问题描述】：

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

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

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

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

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

【问题讨论】：

我确实找到了解决方案，但是，它没有列在答案的顶部，请向下滚动一下。

标签： javascript html animation canvas kineticjs

【解决方案1】：

在不知道最终应用程序的细节的情况下，我建议尽可能避免画布大小的动画。您可能知道，如果您更改画布元素的大小，则存储在其上的所有内容都会被擦除干净。这意味着动画尺寸需要您在每次迭代时重新绘制整个画布时逐步调整宽度和/或高度。对于台式机来说，这可能不是一个大问题。不过，移动设备会遇到困难。

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

如果您希望为画布尺寸设置动画以显示已经存在于更大理论画布上的内容（即用户有一个小窗口正在裁剪整个画布），您最好使用 CSS @987654321 @ 和 height 以及 overflow: hidden; 属性。使用这种方法，您将在所有绘制操作期间编辑整个画布，但是为您的视口大小设置动画会简单而流畅。

【讨论】：

我同意在每一帧上重绘需要高性能，这正是内部函数所做的。有什么方法可以手动完成，无需重绘，例如拉伸（类 CSS），然后在动画完成后重绘？也许是 CSS 解决方案？
@Zar 你绝对可以这样做，但是如果你放大它，你的画布在动画过程中会看起来扭曲（模糊）。您可以在不擦除数据的情况下编辑画布元素的 CSS width 和 height 属性——它只会拉伸内容。动画完成后，只需在内存中创建一个具有新尺寸的临时画布并在其上重新绘制您的内容。然后把旧的伸长的换成新的。
正是我正在寻找的，但使用 KineticJS 不起作用。奇怪的是，更改 CSS 根本不会改变画布。我很快就会发布一个小提琴。
@Zar 我以前从未使用过 KineticJS。您可以访问框架正在操作的实际画布对象吗？如果有，可以直接修改CSSwidth和height。
我奖励了你的帖子，因为它是我认为最好的帖子。感谢您的努力，我会继续寻找直接的解决方案！

【解决方案2】：

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

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

【讨论】：

嗯，根据我对clip 函数的理解，这是否意味着画布从一开始就必须是所需的大小？因为它不会改变实际的画布大小——这正是我想要的。如果我错了，请纠正我。

【解决方案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);
    }

【讨论】：