Z-Index positioning with CreateJS

Question

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.

Answer 1

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.