相当于KineticJS clearRect

Question

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

Kinetic的.removeChildren()方法不仅清除画布，还从DOM中删除画布节点。 这样做不仅使DOM查询的时间间隔为.02秒不一致，而且与我在运行游戏的每台计算机上使用的HTML5画布处理相比，我的FPS速度降低了约60％。

是否有KineticJS方法以诸如clearRect()的方式清除画布？

编辑：

我还确保在程序的任何其他部分都没有问题。 调用堆栈不会溢出，FPS下降只是由于DOM每.02秒更改两次。

编辑2：

我尝试了以下方法：

• 忽略之前的图层，并创建一个空白矩形以填充画布的可见部分。 它使我的帧速率下降到约14 FPS；
• 使用.clear()方法。 它解决了DOM一致性问题，但帧速率甚至比以前更低。

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

编辑3：

至于应用程序，因为有截止日期，所以我开始使用标准HTML5画布。 我仍然希望看到动力学解决方案-将来可能会有所帮助。 令我惊讶的是，在像KineticJS这样的流行库中，如此简单的事情是如此困难，甚至不是不可能。

Answer 1

您可以将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();

Answer 2

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

var newLayer = new Kinetic.Layer();

或调用此函数：

Canvas.clear();

Answer 3

动能使使用图层，组和形状进行绘制非常容易。

如果您正确地查看了这些项目，则可以轻松地将其删除，这些项目将从舞台上删除。

也许您需要重写代码以使其在动力学上更好地工作。

如果您认为您的代码编写正确，则可以尝试（作为一种变通方法）创建动态矩形，并用想要模拟透明的内容填充它。