PixiJS学习（3）容器管理

简介：

在整个 pixiJs 中，所有的精灵和元素的根都是挂载在“舞台”这个巨大的容器上面的，然后经过渲染就可以在 canvas中显示出来。它们的结构关系和 html 的 dom 树相似，二者可以类比，”大家“相互嵌套，有“父子子属关系”，有“兄弟并列关系”，有“层级上下关系”。

因为有它们有相互嵌套的关系，所有就有了“容器”这样的存在。一个容器中可以添加精灵和元素，也可以添加另外一个容器。 stage （舞台）便是一个最大的容器，是所有精灵和元素的根，它也是属于 PIXI. Container 这个类。

容器：

容器代表显示对象的集合，它是所有显示对象的基类，这些显示对象充当其他对象（例如Sprites）的容器。

// 创建一个容器
let container = new PIXI.Container();
// 在容器中添加一个精灵
container.addChild(sprite);

深度管理：

每一个容器都有深度管理功能，它就像排队一样。

每一个显示对象在其父级的容器中都拥有一个属于自己的深度值，而且这个值相对于同级显示对象是唯一的。深度值实际上就是一个显示对象的叠放次序。也可称为 “z-次序”。

深度是由每个容器的子对象列表所管理。每个容器都清楚自己拥有多少个子对象。

 

容器操作：

// 添加子代到容器
// 添加一个子代
container.addChild(sprite);
// 也可以添加多个,它们的深度是：先添加的在最下面
container.addChild(sprite1,sprite2);

// 添加子代到容器的指定位置：
// 添加一个子代到指定位置,如果索引超出范围会报错
container.addChildAt(sprite,4);

// 返回指定位置的子代：
container.getChildAt(4);

// 从容器中取出一个或多个孩子
container.removeChild(sprite);

// 从指定的索引位置删除子级
container.removeChildAt(1);

// 从此容器中删除在开始索引和结束索引内的所有子项
// 移除所有，默认值为开始到结束
container.removeChildren();
// 移除第二个和三个
container.removeChildren(1,2);

http://pixijs.download/release/docs/PIXI.Container.html