KineticJS Z-Index 不适用

Question

你好 stackoverflow 社区

我正在尝试使用 KineticJS 对图像进行分层。不幸的是，它不起作用。 就像您在代码 sn-p 中看到的那样，我正在设置两张图片的 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

是否有可能修复有助于解决此问题的 jsFiddle？我真的很想看到它，因为我对 Kinetic z-Index 感到很困惑。这里接受的答案充满了断开的链接，因为像 http://www.wallerdeknaller.ch/test/td_functions.js 这样的文件不再存在。

我认为如果 jsFiddle 是完全自封装的，其中包含所有必要的代码和 css，则它的效果最好。或者至少，从 CDN 加载库。如果您不想为后代修复小提琴的麻烦，如果您将文件发送给我，我很乐意这样做。

我知道这不遵循 SO 回答指南，我只是没有 50 名声望来评论正确答案。很抱歉！

Answer 2

在 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 中，我可以为您提供更多帮助。