如何设置EaselJS图形和形状的z-index

Question

我在画布上有EaselJS形状，然后每个tick我开始绘制图形。目前，图形正在被绘制在形状上方。 是否有一种方法来定义z-index，以便每帧都会先绘制形状而不是图形？

非常感谢任何帮助。

- RobotEyes

Answer 1

插入后将DisplayObject置于最前面，只需使用以下代码：

stage.setChildIndex( displayObject, stage.getNumChildren()-1);

- stot

---

谢谢@stot。这些createjs舞台方法与旧的Flash方法相同。对于那些使用Adobe Animate的人，这是语法，因为舞台被称为这个：this.setChildIndex(my_movieclip, this.getNumChildren()-1); - jck

在更新的版本中，getNumChildren已被弃用。现在你可以直接调用属性numChildren。来源：http://createjs.com/docs/easeljs/classes/Container.html#method_getNumChildren - zozo

Answer 2

Canvas API没有内置的场景图。一旦绘制了某些东西，就会忘记它被绘制过，而且没有将对象与画布联系起来的参考。这意味着，如果对象发生变化，整个画布可能需要重新绘制。

因此，如果您需要在Graphics对象之上绘制Shape对象，请先绘制Graphics，然后再绘制Shapes。每次重新绘制Graphics时，您都需要重新绘制Shapes。

您还可以将Shapes和Graphics放入Container中，并使用Container的indices来控制对象的渲染顺序。

---

编辑：正如@stot的答案所指出的那样，舞台本身可以用来管理子级索引。这是因为舞台扩展了容器类，并因此继承了该类的方法。

- voithos

---

的确，setChildIndex、addChild 和 addChildAt API 可以帮助您实现这一点。 - Lanny

可以使用stage.setChildIndex(..)来设置其索引，请参见@stot的答案。 - Glogo