画布（Kinetic.JS）：多层与单层方法

Posted 2023-03-05

【中文标题】画布（Kinetic.JS）：多层与单层方法

【英文标题】：Canvas (Kinetic.JS): multiple layers vs single layer approach

【发布时间】：2012-08-23 09:48:53

【问题描述】：

谁能解释为什么（确实，如果）在使用 Kinetic 之类的东西时最好将画布游戏的主要部分抽象到不同的层？

这当然是你应该做的，到目前为止我一直是：一层用于背景，一层用于玩家角色，以及其他。

然后我遇到了一种情况，我需要一个图层的形状位于另一图层的形状后面 - 但是将整个图层移动到另一图层后面不是一个选项，所以我很不情愿地重新编码，所以整个游戏位于一层。

但令我惊讶的是，我仍然可以做我需要做的一切。我仍然可以为单个形状或组设置动画或处理事件。

简而言之：显式分层带来什么优势？使用一层方法可能会遇到哪些陷阱？

【参考方案1】：

如果您的游戏包含许多不同的内容，则绘制所有内容可能需要一些时间。同一层太多会降低性能。虽然太多的层也是如此。

查看：http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

【讨论】：

感谢您的回复 - 但是我的游戏不会像本示例中那样出现性能压力。

拖放压力测试不再起作用，我想说它可能只是针对我的平台（Chrome Win8），但是，当您单击 iframe 下方的“在新窗口中打开”时，您可以看到它会将您带到“不存在”页面。

最新版本的 Chrome 存在错误。对我来说，我注意到我的点击区域不再起作用（它们的 1x1px 而不是 50x50）。我发现了这个：github.com/ericdrowell/KineticJS/issues/368 将 kinetic.js 文件中的 context.fill(context) 替换为 context.fill() 以解决 4.0.1 及更高版本的问题。

【参考方案2】：

实际上，层通常会带来巨大的优势。但是，有时它们不是必需的。只是给出一个想法 - 比较 PhotoShop（图层）和 MS Paint（无图层）。如果这给了你想法，那就是它！

如果不是：层是一个组织概念。它使您可以分段处理数据。他们允许：

对整个图层应用某些变换。 自动按层对对象进行分类，以便您获得 一个图层的所有对象，并且非常容易使用它们。 将层中发生的任何事情与其他层中发生的事情隔离开。 禁用/启用整个图层。 更多更多！

如您所见，层通常允许诸如封装之类的抽象，并且在某种程度上，多态可以在内容组织级别上强制执行。单层方法带来的陷阱就是 - 太紧密的耦合 - 来自永久混乱世界的野兽，封装和多态性为之而战永恒。纳夫说！

【讨论】：

感谢您的回复。但是，您列出的所有点也适用于可以位于单个层上的 组，所以我仍然不确定为什么我应该将我的游戏分成多个层，或者如果我确实应该是。

@Utkanos 嗯，是的，我认为您的问题更为基本，但它似乎与 Kinetic.JS 密切相关。也就是说，我相信，在这里的“它是如何工作的”部分中进行了一些解释：github.com/ericdrowell/KineticJS/wiki - 每一层似乎都有自己的事件总线。我想你也可以在这里问：html5canvastutorials.com/kineticjs/…

谢谢 - 我会检查链接。 +1

【参考方案3】：

在组织方面，noncom 的回答是正确的。然而，正如他所指出的，他的回答更多地是关于画布动画，而您指出 KineticJS 提供了自己的工具来提供相同的组织优势是非常正确的。

因此，与组织无关，我们所拥有的只是性能。话虽如此，主要区别在于每个“层”对应一个不同的画布标签。

那么简单的答案是，拥有多个图层允许您有选择地一次仅重绘一个画布标签。想一想，如果您有对象在背景上移动，您是否希望每次这些对象移动时都清除并重新绘制背景？

如果您不使用图层，那就是正在发生的事情。你想要的是一个只有在背景改变时才会再次绘制的背景，这意味着背景层。

这是否真的值得在很大程度上取决于您的应用程序，但这就是想法。层（组织之外）的重点是将所需的绘图过程与实际需要绘制的事物隔离开来。对于复杂的动画，这对于保持良好的性能非常重要。

这是一个 jsperf 供参考：http://jsperf.com/layered-canvases/3