canvas - KineticJS Z-Index 不适用

Question

嗨，stackoverflow 社区

我正在尝试使用 KineticJS 对图像进行分层。不幸的是它不起作用。
就像您在代码片段中看到的那样，我正在设置两张图片的 Z-Index，当我记录它们时，它们的顺序仍然相同。
可以看到函数startClouds(field) .此函数创建 Z-Index 为 2 的云，这实际上是有效的。我从一个小时开始就试图解决这个问题，我真的不知道为什么它不起作用。

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);
}

谢谢你的帮助

Answer 1

在 kineticjs 中，每次向图层添加新图像时，都会自动设置索引。索引从 0 开始

首先，像这样重新排序你的代码:

 //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

如果你想在 z-indexes 周围移动东西，尽量避免

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

功能和用途

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

如果您需要更多帮助，请将一些功能代码粘贴到 jsfiddle 中，我可以为您提供更多帮助。