KineticJS clearRect 等效项答案

【问题标题】：KineticJS clearRect equivalentKineticJS clearRect 等效项
【发布时间】：2013-12-19 14:09:28
【问题描述】：

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

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

有没有KineticJS 的方法可以以clearRect()'s 之类的方式清除画布？

编辑：

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

编辑 2：

我尝试了以下方法：

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

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

编辑 3：

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

【问题讨论】：

时间紧迫！您在 2 小时前问了您的问题，并且已经放弃了所有希望。关于 KineticJS 的提示：这个库正在迅速变化，并且经常发生重大变化——确保你查看了更改日志和文档；）

标签： javascript html canvas kineticjs

【解决方案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();

【讨论】：

不会只清除画布，但保留 JavaScript 对象吗？
是的，这就是优势。您可以只清除图层的“脏”部分，但不能清除整个画布。脏部分是在下一个动画帧中必须看起来不同的部分。清除绘图表面的脏部分比清除/重绘整个画布要快得多（这确实是一个非常古老的图形技巧 - GPU 也在幕后执行此操作）。大概你的 Kinetic 节点在 .clear 期间被视觉擦除，但它仍然存在。然后，您可以将该节点移动/隐藏到其新位置，然后调用 node.draw() 以直观地显示该节点。
是的，因为雅达利时代有一个精灵层。在我的程序中，正是由于旧的使用 no-lib HTML5 画布，页面中有两个不同的空间（叠加），并且前景在开始时仅绘制一次。画布本身是只是要改变的层。要以这种方式使用 Kinetic，需要对系统进行近乎完全的重建。
还不错——祝你的项目好运 :) 注意：调用 layer.draw 时 Kinetic 会自动清除画布——因此您无需手动调用 clearRect。
实际上 Kinetic 确实可以让您将 Kinetic 对象与 html 画布绘图混合。查看 Kinetic.Shape，它为您提供了一个上下文对象，您可以使用它来执行标准的 html 画布上下文方法。我知道你的最后期限很紧......但是有一天当你有时间时，更深入地检查动力学能力。再次，祝你的项目好运:)

【解决方案2】：

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

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

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

如果您认为您的代码编写正确，您可以尝试（作为一种解决方法）创建动态矩形并用您想要模拟清除的任何内容填充它。

【讨论】：

【解决方案3】：

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

var newLayer = new Kinetic.Layer();

或者调用这个函数：

Canvas.clear();

【讨论】：

它并没有真正解决我的问题。我不确切知道 Kinetic 的层系统是如何工作的，但由于某种原因，你给我的任何一个建议都只会让它更慢：/
这取决于你如何使用它！