KineticJS 中的 Z 索引答案

【问题标题】：Z-Index in KineticJSKineticJS 中的 Z 索引
【发布时间】：2012-12-25 21:36:55
【问题描述】：

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

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

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

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

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

【问题讨论】：

如果有人好奇或遇到同样的问题，我现在找到了解决方案。我有一张 40x40 瓷砖的等轴测图，所以我得到了大约 80 个不同的可能深度。因为我无法通过不同的 Z-index 来管理它，所以我现在制作了 80 个不同的动力学组，每个都有自己的深度。我只是移动正确组中的所有对象和墙壁，并在玩家在世界中移动时在这些组之间移动。到目前为止，这是有效的，我想我会继续使用这个解决方案。只是好奇是否有其他解决方案。

标签： z-index kineticjs

【解决方案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);
}

【讨论】：