How to set zindex in konva.js?

Question

I have a problem with the Zindex in konva.js. After I added everything to the layer I am trying to assign a property to a node for each element separately. But it does not work. For example

for(let i = 0; i<=this.layer['children']; i++){
    this.layer['children'][i].setZIndex(someInt);
}

How can i set zindex for all elements in layer?

Answer 1

zIndex in Konva is just index of the element in an array of children of the parent element. So you can't set any number to it and it can not be bigger than children.length - 1.

Answer 2

If you would prefer to be able to set the render order of nodes using arbitrary numbers (like CSS, or how it works in most game engines, etc), you can use this fork of Konva. Alternatively, you could also grab & apply just the rejected pull request for this feature if you already have a customized Konva version.

The new feature works by adding a zOrder property to all Nodes, and a special kind of group AbsoluteRenderOrderGroup that reads and understands this property for all children.