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

Animate resize of HTML5 canvas created by KineticJS framework

本文关键字：HTML5 创建 调整 KineticJS 框架 动画      更新时间：2023-09-26

我试图更改KineticJS框架创建的HTML5画布元素的大小，也就是说，不是画布内的对象，而是元素的大小。

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

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

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

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

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

相反，我建议你通过增加容器元素的大小来伪造动画（带有边框、背景色等，这样动画就很明显了）。然后，当动画完成时，将当前画布数据保存到一个临时对象中，增加画布的大小，并将旧内容标记回画布上。

如果您希望为画布维度设置动画，以显示较大理论画布上已经存在的内容（即，用户有一个小窗口，可以裁剪整个画布），那么最好使用CSS width和height以及overflow: hidden;属性。使用这种方法，您将在所有绘制操作中编辑整个画布，但设置视口大小的动画将简单而平滑。

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

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

经过一些研究，我找到了自己的破解解决方案。使用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);
    }
相关文章：