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

谁借莪１个温暖的怀抱￠ 2021-09-12 05:30 504阅读 0赞

上篇有详细介绍了基本显示对象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); //设置层深,越大越靠前