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

【问题标题】：How can I set the z-index of EaselJS Graphics and Shapes如何设置 EaselJS 图形和形状的 z-index
【发布时间】：2013-02-04 11:35:38
【问题描述】：

我在画布上有 EaselJS 形状，然后我开始在每个刻度上绘制图形。目前，图形正在形状上绘制。有没有办法定义 z-index 以便在每一帧的 Graphics 上绘制 Shapes？

任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

Canvas API has no built-in scene graph。一旦绘制了某些东西，它被绘制的事实就被遗忘了，并且没有与画布相关联的对象的引用。这意味着，如果对象发生变化，可能需要重新绘制整个画布。

因此，如果您需要在 Graphics 对象之上绘制 Shape 对象，只需在绘制 Shapes 之前绘制 Graphics。每次重绘图形时都需要重绘图形。

你也可以把Shapes和Graphics都放到一个Container中，使用Container的indices来控制对象的渲染顺序。

编辑：正如@stot's answer 所指出的，Stage 本身可以用于管理子索引。这是因为 Stage 扩展了 Container 类，因此继承了该类的方法。

【讨论】：

【解决方案2】：

要在插入后将DisplayObject 放在前面，只需使用以下命令：

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

【讨论】：

谢谢@stot。这些 createjs 阶段方法与旧的 Flash 方法相同。对于那些使用 Adobe Animate 的人，这里是语法，因为舞台被称为：this.setChildIndex( my_movieclip, this.getNumChildren()-1);
在较新的版本中，不推荐使用 getNumChildren。您现在可以直接调用属性 numChildren。来源：createjs.com/docs/easeljs/classes/…