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-index移动东西，试着避免

 .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中粘贴一些功能代码，我可以为您提供更多帮助。

Answer 2

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

我认为如果jsFiddle是非常自我封装的，并且所有必需的代码和css都包含在其中，那么它的效果最好。或者至少从CDN加载库。如果你不想为后代修复小提琴的麻烦，如果你把文件寄给我，我很乐意这样做。

我知道这不遵循SO回答指南，我只是没有50个声誉来评论正确答案。对不起！

KineticJS Z-Index不适用

2 个答案: