CODEWITHSUNDEEP
canvasz-indexkineticjs
KingSchniddy
KingSchniddy

Reputation: 95

KineticJS Z-Index doesnt apply

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

Upvotes: 4

Views: 2373

Answers (2)

Oscar Gillespie
Oscar Gillespie

Reputation: 117

Would it be possible to fix the jsFiddle which helped to resolve this question? I would really love to see it because I'm quite confused by Kinetic z-Index. The accepted answer here is full of broken links, because files like http://www.wallerdeknaller.ch/test/td_functions.js are no longer there.

I think jsFiddle works best if it is quite self-encapsulated, with all the necessary code and css wrapped inside it. Or at least, loading a library from a CDN. If you want don't want the hassle of repairing the fiddle for posterity, I'm happy to do it if you send me the files.

I'm aware this isn't following the SO answering guidelines, I just don't have the 50 reputation to comment on the correct answer. Sorry about that!

Upvotes: 0

SoluableNonagon
SoluableNonagon

Reputation: 11755

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.

Upvotes: 1

Related Questions