前端动画渲染引擎pixi.js系列（3）container和Sprite继承外专有的函数与方法

上篇有详细介绍了基本显示对象PIXI.DisplayObject，本篇则是对Container、Sprite专有的函数与事件进行详细分析，如果读者暂时不想对这两类对象有深入理解，可以略过本篇内容。（本篇文章和上篇文章的所有函数和方法的解释均来自于官网API）

一.容器PIXI.Container的[独有]参考函数与方法

继承关系：PIXI.Container->PIXI.DisplayObject

------------------------------------------------------------------------------------

1.PIXI.Container参考函数([]里表示入参或出参类型)：

------------------------------------------------------------------------------------

(只读)children[Array.<PIXI.DisplayObject>]:

容器的子集。

------------------------------------------------------------------------------------

2.PIXI.Container参考事件,()内表示参数,[]里表示参数类型:

------------------------------------------------------------------------------------

_calculateBounds():

重新计算的对象的边界 。

addChild(child)[PIXI.DisplayObject]:

向容器中添加一个显示对象,如需同时添加多个对象可用myContainer.addChild(thingOne, thingTwo, thingThree)。

addChildAt(child, index)[PIXI.DisplayObject,number]:

向容器中的指定位置添加一个显示对象。

calculateBounds():

重新计算本容器的矩形范围。

getChildAt(index)[number]:

获取容器中指定索引值的子对象。

getChildIndex(child)[PIXI.DisplayObject]:

获取容器中指定子对象的索引值。

removeChild(child)[PIXI.DisplayObject]:

移除容器中的子对象。

removeChildAt(index)[number]:

移除容器中指定位置的子对象。

removeChildren(beginIndex, endIndex)[number,number]:

移除容器中起始索引值至结束索引值之间的子对象，返回值为被移除的子对象列表。

参数beginIndex为起始索引值，endIndex为结束索引值，结束索引值不能小于起始索引值。

setChildIndex(child, index)[PIXI.DisplayObject,number]:

改变指定索引值的子对象。

swapChildren(child, child2)[PIXI.DisplayObject,PIXI.DisplayObject]:

互换容器中的两个子对象。

二.精灵PIXI.Sprite的[独有]参考函数与事件

继承关系：PIXI.Sprite->PIXI.Container

------------------------------------------------------------------------------------

1.PIXI.Sprite参考函数([]里表示入参或出参类型)：

------------------------------------------------------------------------------------

anchor[PIXI.ObservablePoint]:

设置原点位置，值范围为0~1，默认值为0,0;当设置为1,1时标明原点的位置在对象的右下角。设置方法如下：

sprite.anchor.x = 0.5; 
sprite.anchor.y = 0.5;

blendMode[number]:

混合模式，主要功效是可以用不同的方法将对象颜色与底层对象的颜色混合。可以通过以下代码获取各种混合模式。

for(var key in PIXI.BLEND_MODES) { var value = PIXI.BLEND_MODES[key]; }

pluginName[string]:

负责渲染此元素的插件。允许自定义渲染过程无需重写“_renderwebgl’和‘_rendercanvas方法。默认为'sprite'

texture[PIXI.Texture]:

该对象的纹理。

tint[number]:

设置该对象的色彩（十六进制）。当设为0xFFFFFF时表示移除所有色彩。

------------------------------------------------------------------------------------

2.PIXI.Sprite参考事件,()内表示参数,[]里表示参数类型:

------------------------------------------------------------------------------------

PIXI.Sprite.from(source):

基于源创建一个显示 对象。源source可以是frame id, image url, video url, canvas element, video element, base texture。

PIXI.Sprite.fromFrame(frameId)[string]:

基于frame id创建一个显示对象。

PIXI.Sprite.fromImage(imageId, crossorigin, scaleMode)[string,boolean,number]:

基于imageId创建一个显示资源。
参数imageId，通过PIXI.loaders.Loader()预加载时会出现，如下例中的texturePng就是imageId。crossorigin和scaleMode为可选参数，crossorigin表示是否要用到特殊的跨域参数，scaleMode表示缩放模式，有两种分别是PIXI.SCALE_MODES.LINEAR线性缩放和PIXI.SCALE_MODES.NEAREST去模糊缩放。

（注）在加载图片时，PixiJS加载的方式为异步加载，但在实际应用中资源往往需要提前预加载，下面的例子为调用PIXI.loaders.Loader实现预加载的写法。

var loader = new PIXI.loaders.Loader();
loader.add('skeletonData', "../Egret/005/skeleton.json");
loader.add('textureData', "../Egret/005/texture.json");
loader.add('texturePng', "../Egret/005/texture.png");
loader.on("progress", function(target, resource) {
	console.log("progress:", target.progress); //加载进度
});
loader.once('complete', function(target, resource) {
	var sprite = PIXI.Sprite.fromImage("texturePng");
	container.addChild(sprite);
});
loader.load();

（注）如需设置显示对象间的层深关系，使用setChildIndex方法，代码写法如下：

app.stage.addChild(bunny); //将显示精灵添加进显示容器
app.stage.addChild(bunny1); //将显示精灵添加进显示容器
app.stage.setChildIndex(bunny, 1); //设置层深,越大越靠前