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

Question

任何人都可以解释为什么（实际上， 如果 ）在使用像Kinetic这样的东西时最好将画布游戏的主要部分抽象到不同的层次？

它当然感觉就像你应该的那样，到目前为止我一直是：背景的一层，玩家角色的一层，以及其他层。

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

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

简而言之：显式分层带来了哪些优势？ 单层方法可能会遇到哪些陷阱？

Answer 1

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

如果不是：层是组织概念。 它可以让你处理碎片数据。 他们允许：

1. 将某些转换应用于整个图层。
2. 基于每个图层自动对对象进行分类，以便您可以非常轻松地获取图层的所有对象并使用它们。
3. 隔离层中发生的任何事情，使其在其他层中发生。
4. 禁用/启用整个图层。
5. 还有更多！

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

Answer 2

如果你的游戏包含很多不同的东西，绘制一切可能需要一些时间。 同一层中的太多会降低性能。 虽然太多的层也是如此。

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

Answer 3

在组织方面，非公司的答案很明显。 然而，正如他已经注意到他的回答更多是关于帆布动画的一般情况，并且你指出KineticJS提供它自己的工具来提供同样的组织利益是非常正确的。

因此，在组织无关紧要的情况下，我们所拥有的只是表现。 话虽如此，主要区别在于每个“层”对应于不同的画布标签。

简单的答案是，拥有多个图层允许您一次只选择性地重绘一个画布标记。 想一想，如果你有一些物体在背景上移动，你想在每次移动这些物体时清除并重新绘制背景吗？

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

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

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