2

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

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

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

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

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

4

3 回答 3

1

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

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

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

于 2012-01-29T18:58:22.680 回答
0

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

ctx.moveTo(162, 20);
ctx.lineTo(162, 320);
ctx.lineTo(300, 320);
ctx.lineTo(300, 20);
ctx.clip();
于 2012-02-04T20:46:06.840 回答
0

经过一番研究，我找到了自己的 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);
    }
于 2012-02-13T21:04:09.177 回答