Question

Hi stackoverflow community

I’m trying to layer images by using KineticJS. Unfortunatly it does not work.
Like you see in the code snippet i’m setting the Z-Index of two pictures, when i log them they’re still in the same order.
You can see the function startClouds(field). This function creates clouds with a Z-Index of 2, what actually works. Im trying to fix that since an hour and i really have no idea why its not working.

var title = new Image();
var title_p = new Image();
title.src = '/test/images/title_bg.png';
title_p.src = '/test/images/title_pic.png';

title.onload = function(){
    var title_background = new Kinetic.Image({
        x: 0,
        y: 0,
        image: title
    });
    field.add(title_background);
    title_background.setZIndex(1);
    field.draw();
    console.log('Z-Index of background: '+title_background.getZIndex());

    var title_pic = new Kinetic.Image({
        x: 0,
        y: 0,
        image: title_p
    });
    field.add(title_pic);
    title_pic.setZIndex(3);
    field.draw();
    console.log('Z-Index of Title: '+title_pic.getZIndex());

    startClouds(field);

    var start = new Kinetic.Text({
        x: 240,
        y: 160,
        text: '[Press Any Key to Start]',
        fontSize: 22,
        fontFamily: 'Calibri',
        fill: 'white'
    });
    field.add(start);
    field.draw();
    stage.add(field);
}

Thx for the help straight ahead

Answer 1

In kineticjs every time you add a new image to a layer, the index is automatically set. Indexes start at 0

First, re-order your code like so:

 //create objects first
 var title_background = new Kinetic.Image({
    x: 0,
    y: 0,
    image: title
 });
 var title_pic = new Kinetic.Image({
    x: 0,
    y: 0,
    image: title_p
 });
 var start = new Kinetic.Text({
    x: 240,
    y: 160,
    text: '[Press Any Key to Start]',
    fontSize: 22,
    fontFamily: 'Calibri',
    fill: 'white'
});
// now add objects to layer
field.add(title_background);   // z-index of 0
field.add(title_pic);          // z-index of 1
field.add(start);              // z-index of 2

startClouds(field);   // anything created by startClouds() is going to have z-index > 2

if you want to move things around z-indexes, try to avoid

 .setZIndex()  //note: use this AFTER all the objects have been added to the layer

function and use

 .moveToTop() and .moveToBottom() //this way the movement is relative rather than specific.

If you’d like more help, paste some functional code in a jsfiddle and I can help you out some more.