前端动画渲染引擎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); //设置层深,越大越靠前

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值