Pixi.js: 可排序的显示对象

创建于 2013-08-29 · 12评论 · 资料来源: pixijs/pixi.js

有时，我们需要按照一定的顺序渲染显示对象以保留z-index。

最好是我们有办法选择绘制的子对象的ordre，甚至可以使用sort方法，也可以通过为单个DisplayObject允许单独的reder方法，以便开发人员可以构建它的有序列表，遍历对象并渲染它们。

🤔 Question

资料来源

alaa-eddine

最有用的评论

var mapContainer = new PIXI.DisplayObjectContainer(),
    unitsContainer = new PIXI.DisplayObjectContainer(),
    menuContainer = new PIXI.DisplayObjectContainer();

mapContainer.zIndex = 5;
unitsContainer.zIndex = 10;
menuContainer.zIndex = 20;

/* adding children, no matter in which order */
stage.addChild(mapContainer);
stage.addChild(menuContainer);
stage.addChild(unitsContainer);

/* call this function whenever you added a new layer/container */
stage.updateLayersOrder = function () {
    stage.children.sort(function(a,b) {
        a.zIndex = a.zIndex || 0;
        b.zIndex = b.zIndex || 0;
        return b.zIndex - a.zIndex
    });
};

stage.updateLayersOrder();

tengotengo 于 2015-03-25

👍2 ❤1

所有12条评论

children数组中对象的顺序是它们将被呈现的顺序。这意味着数组中的最后一个将呈现在“顶部”

englercj 于 2013-08-29

现在我有点傻xD
阅读源代码时，我在renderDisplayObject中看到一个链表，并认为stage.children数组在此发行版中不存在了。
没关系，它与stage.children sorting一起正常工作:)

顺便说一句1.3.0的表现真是太棒了！我正在完成一小段代码以在cocoonjs上测试WebGL内容

谢谢：）

alaa-eddine 于 2013-08-30

没问题，很高兴PIXI为您工作！

englercj 于 2013-08-30

var mapContainer = new PIXI.DisplayObjectContainer(),
    unitsContainer = new PIXI.DisplayObjectContainer(),
    menuContainer = new PIXI.DisplayObjectContainer();

mapContainer.zIndex = 5;
unitsContainer.zIndex = 10;
menuContainer.zIndex = 20;

/* adding children, no matter in which order */
stage.addChild(mapContainer);
stage.addChild(menuContainer);
stage.addChild(unitsContainer);

/* call this function whenever you added a new layer/container */
stage.updateLayersOrder = function () {
    stage.children.sort(function(a,b) {
        a.zIndex = a.zIndex || 0;
        b.zIndex = b.zIndex || 0;
        return b.zIndex - a.zIndex
    });
};

stage.updateLayersOrder();

tengotengo 于 2015-03-25

👍2 ❤1

子数组为readonly

glebmachine 于 2015-12-09

@glebmachine并不意味着您不能称呼“排序”

ivanpopelyshev 于 2016-01-01

@tengotengo谢谢！您的解决方案既简单又优雅。

aquachris 于 2016-03-16

@tengotengo的解决方案真的是最终的解决方案吗？能够更改z-index似乎是我的主要功能。想象一下，在等距游戏中，根据您的y轴，可以将一个子画面视为另一个子画面的后面或前面。执行z-index是处理此问题的传统方法，在这种情况下，您只需将精灵的y底部位置映射到其z-index并完成。现在，我将进行分类整理，但似乎应该有一个官方的解决方案。