KineticJS clearRect equivalent

KineticJS clearRect equivalent

本文关键字：equivalent clearRect KineticJS      更新时间：2024-02-19

我现在进入Kinetic，这让我在画布上画画变得容易多了。然而，在构建游戏应用程序时，我需要清除每个动画请求上的矩形。它们由fps上限脚本控制，但每秒仍有大约50次更新。

Kinetic的.removeChildren()方法不仅清除画布，还从DOM中删除画布节点。这样做不仅会使DOM查询以0.02秒的间隔不一致，而且与我运行游戏的每台机器上的HTML5画布处理相比，我的FPS率也下降了约60%

有没有像clearRect()那样的KineticJS方法来清除画布？

编辑：

我还确保这在程序的任何其他部分都没有问题。调用堆栈没有溢出，FPS下降只是因为DOM每0.02秒更改两次。

编辑2：

我尝试过以下几种：

  • 忽略前面的层，创建一个空白矩形来填充画布的可见部分。它把我的帧速率降到了14帧/秒左右
  • 使用.clear()方法。它解决了DOM一致性问题，但帧速率比以前更低

似乎唯一的解决方案是调用默认的HTML5clearRect()方法，但这意味着手动创建画布元素（可能会使Kinetic作为我的应用程序的库变得无用）。

编辑3：

至于这个应用程序，我已经开始使用标准的HTML5画布，因为我有一个截止日期。不过，我仍然希望看到一个动能解决方案——它可能在未来会有所帮助。在KineticJS这样的流行库中，看到这么简单的事情即使不是不可能，也是如此困难，这让我感到惊讶。

您可以使用带有边界区域的layer.clear来只清除层的"脏"部分。

// tell layer not to auto-clear on layer.draw
layer.setClearBeforeDraw(false);
// clear the "dirty" portion of the canvas
layer.clear(100, 100, 150, 150);

// adjust some animation values and
// just draw the element that has changed
myRect.draw();

您应该尝试创建新的层，例如：

var newLayer = new Kinetic.Layer();

或者调用此函数：

Canvas.clear();

Kinetic使使用层、组和形状绘制变得非常容易。

如果你的视图是由这些项目组成的，你可以很容易地将它们删除，它们将从舞台上删除。

也许你需要重写你的代码，使它在动能方面更好地工作。

如果你认为你的代码写得很好，你可以尝试（作为一种变通方法）创建动态矩形，并用你想模拟的任何东西填充它。

相关文章：