Search code examples
kineticjs

How can I hide an animated node behind a layer in KineticJS?

I'm animating a node traveling through a wave and I need it to hide behind the wave's white wash.

I named the white wash layer, and the blue wave area as waveLayer. The node travels from right to left across waveLayer, but then should be hidden behind layer.

I thought zindex would solve the problem but it did not:

stage.add(layer);
layer.setZIndex(10);

stage.add(waveLayer);
waveLayer.setZIndex(0);

I added the node to waveLayer so I thought it would have the same zindex. Can anybody help with this? Check out the jsfiddle for more clarification:

http://jsfiddle.net/5SSTG/

Any help would be greatly appreciated.

Solution

  • You can use layer.moveToBottom() to set your layer's z-index less than all other layers.

    You can use layer.moveToTop() to set your layer's z-index greater than all other layers.