html - 使用 CreateJS 进行 Z-Index 定位

Question

我正在尝试为我的线 Graphic() 设置 z-index。我正在尝试将线设置为始终位于其他两个形状的后面。

据我所知，添加的第一个元素是 z=0，第二个元素是 z=1，依此类推。是这样吗？z=0 是顶部还是底部？

我正在尝试使用 stage.setChildIndex(element, z-level) 更改他们的 z 位置，对吗？

谢谢。

Answer 1

1）索引越低，“后面”中的项目越多，因此：0 = bottom 请记住，setChildIndex如果您尝试以下操作会失败：container.setChildIndex(child,500)如果您只有 4 个孩子，那么您要设置孩子的索引to 不得超出范围。这意味着如果要对它们进行排序，则应从最低索引（通常为 0）开始。

2）或者你也可以给你的对象一个属性，例如：child.zIndex = 500;并编写你自己的排序方法，然后使用sortChildren容器的 - 方法，例如：

function sortByZ(a,b) {
    if (a.zIndex < b.zIndex) return -1;
    if (a.zIndex > b.zIndex) return 1;
    return 0;
}

myContainer.sortChildren(sortByZ);

// or a shorter version:
function sortByZ(a,b) {
    return a.zIndex - b.zIndex;
}

这样您就不必担心设置超出范围的 zIndex。

Answer 2

使用 createjs，setChildIndex() 的有效值在 0 到 numChildren()-1 的范围内。一个调用，例如：

container.setChildIndex(container.numChildren());

将失败。

更重要的是，当您增加子索引时 - 例如，对于 z-index 1 更改为 2 的子索引，子索引将被放置在索引 2 处的对象前面。如果您减小索引，将子索引向后移动它会移动到目标位置的对象后面。当您不确定孩子的初始 z-index 是什么时，它可能会增加混乱。