I'm trying to set the z-index for my line Graphic(). I'm trying to set the line to be always behind the other two shapes.
As far as I know, the first element added is z=0, the second one is z=1 and so on. Is that so? Is z=0 the top possition or is it the bottom?
I'm trying yo change their z position using stage.setChildIndex(element, z-level), is that right?
Thanks.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
1) The lower the index, the more in the 'back' is the item, so: 0 = bottom
Please also keep in mind that setChildIndex
will fail if you try something like: container.setChildIndex(child,500)
if you only have 4 children, so the index you want to set the child to must not be out of range. That means if you want to sort them you should start with the lowest index (usually 0).
2) Or you could also give your objects a property like e.g.: child.zIndex = 500;
and write your own sort-method to then use the sortChildren
-method of the container, for example:
function sortByZ(a,b) {
if (a.zIndex < b.zIndex) return -1;
if (a.zIndex > b.zIndex) return 1;
return 0;
}
myContainer.sortChildren(sortByZ);
// or a shorter version:
function sortByZ(a,b) {
return a.zIndex - b.zIndex;
}
That way you wouldn't have to worry about setting a zIndex, that is out of bounds.
With createjs valid values for setChildIndex() are in the range of 0 to numChildren()-1. A call such as:
container.setChildIndex(container.numChildren());
will fail.
What's more when you increase the child index - in example for a child with z-index 1 when changed to 2, the child will be placed in front of the object at index 2. In case you decrease the index moving the child backward it will be moved behind the object at the targeted position. It may add confusion when you are not sure what the initial z-index of the child is.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With