Question

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

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

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

编辑：

我还确保在程序的任何其他部分都不是问题。调用堆栈不会溢出，FPS下降只是因为DOM每0.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

Kinetic可以很容易地使用图层，组和形状进行绘制。

如果您的视图正确制作了这些项目，您可以轻松删除它们，它们将从舞台上移除。

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

如果你认为你的代码编写得当，你可以尝试（作为一种解决方法）创建动态矩形并用你想要模拟的任何颜色填充它。

KineticJS clearRect等效

编辑：

编辑2：

编辑3：

3 个答案: