14

I have EaselJS Shapes on the canvas and then I start drawing Graphics each tick. At the moment the graphics are being drawn over the Shapes. Is there a way to define the z-index so that the Shapes are drawn over the Graphics each frame?

Any help would be much appreciated.

RobotEyes
  • 4,929
  • 6
  • 42
  • 57

2 Answers2

28

To bring an DisplayObject to front after insertion just use this:

stage.setChildIndex( displayObject, stage.getNumChildren()-1);
stot
  • 1,036
  • 10
  • 20
  • 1
    Thank you @stot. These createjs stage methods are the same than the old Flash ones btw. For those who use Adobe Animate, here's the syntax, as stage is referred to this: `this.setChildIndex( my_movieclip, this.getNumChildren()-1);` – jck Jun 06 '16 at 13:34
  • 1
    In the newer versions getNumChildren is deprecated. You can directly call the property numChildren now. Source: http://createjs.com/docs/easeljs/classes/Container.html#method_getNumChildren – zozo Oct 14 '16 at 09:33
2

The Canvas API has no built-in scene graph. Once something is drawn, the fact that it was drawn is forgotten, and there is no reference of the object tied to the canvas. This means that, if the object changes, the entire canvas could potentially need to be redrawn.

Thus, if you need your Shape objects to be drawn on top of your Graphics objects, just draw the Graphics before you draw the Shapes. You'll need to redraw the Shapes every time you redraw the Graphics.

You could also put both Shapes and Graphics into a Container, and use the indices of the Container to control the rendering order of the objects.

Edit: As noted by @stot's answer, it turns out that the Stage itself can be used to managed child indices. This is because the Stage extends the Container class, and thus inherits the methods of that class.

Community
  • 1
  • 1
voithos
  • 68,482
  • 12
  • 101
  • 116