KineticJS 中的 Z 索引

Question

我正在尝试使用 kineticJS 进行编程，但我在 Z-Index 管理方面遇到了一些麻烦。

似乎你不能只设置你想要的任何范围的 z-index，但每个对象都有自己的 z-index，你可以用其他对象重新更改它们。所以如果你有 2 个对象，它们的 z-index 为 0 和 1。你不能将它设置为 100 或类似的值。对吗？

我的问题是，我正在尝试编写一个具有等距概览的小游戏。并且玩家的 z-index 应该低于他正在行走的墙壁，但当他在墙壁前面时具有更高的 z-index。但我不能让所有具有相同 y 坐标的墙都具有相同的 z 索引，它们都有自己的免费 z 索引，这使得它们非常随机。

例如，y 坐标为 5 的墙的 z 索引为 5，而墙前面的玩家的 z 索引为 6。但最后，所有墙的随机索引为 5-20并且玩家得到一个随机索引，因此完全不可能创建这样的游戏。

还有其他方法可以管理对象的 z-index 吗？我看到的唯一解决方案是为具有唯一 z-index 的 map 的所有图 block 制作一个包含 2 个隐藏对象的隐藏层，并编写一个脚本，用墙壁和玩家或其他对象动态更改它们。但是必须有更好的方法来确保对象以正确的顺序显示吗？

Answer 1

我刚遇到同样的问题。 Z-index 似乎只能按顺序工作？所以我对我的元素列表进行排序，然后根据数组索引分配它们的 Z 索引:

var sortedElements = _elements.slice();
sortedElements.sort(function(a, b) {
    var diff = a.getY() - b.getY();
    if ( diff !== 0 ) { return diff; }
    return a.getX() - b.getX();
} );
for ( var loop = 0, length = sortedElements.length; loop < length; loop++ ) {
    sortedElements[loop].setZIndex(loop);
}