前端动画渲染引擎pixi.js系列(3)container和Sprite继承外专有的函数与方法
2017-04-14 18:24
711 查看
上篇有详细介绍了基本显示对象PIXI.DisplayObject,本篇则是对Container、Sprite专有的函数与事件进行详细分析,如果读者暂时不想对这两类对象有深入理解,可以略过本篇内容。(本篇文章和上篇文章的所有函数和方法的解释均来自于官网API)
继承关系:PIXI.Container->PIXI.DisplayObject
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
(只读)children[Array.<PIXI.DisplayObject>]:
容器的子集。
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
_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.Container
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
anchor[PIXI.ObservablePoint]:
设置原点位置,值范围为0~1,默认值为0,0;当设置为1,1时标明原点的位置在对象的右下角。设置方法如下:
blendMode[number]:
混合模式,主要功效是可以用不同的方法将对象颜色与底层对象的颜色混合。可以通过以下代码获取各种混合模式。
pluginName[string]:
负责渲染此元素的插件。允许自定义渲染过程无需重写“_renderwebgl’和‘_rendercanvas方法。默认为'sprite'
texture[PIXI.Texture]:
该对象的纹理。
tint[number]:
设置该对象的色彩(十六进制)。当设为0xFFFFFF时表示移除所有色彩。
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
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实现预加载的写法。
(注)如需设置显示对象间的层深关系,使用setChildIndex方法,代码写法如下:
一.容器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] e733 ; }
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); //设置层深,越大越靠前
相关文章推荐
- 前端动画渲染引擎pixi.js系列(2)container和Sprite的概念和继承关系
- 前端动画渲染引擎pixi.js系列(8)动画精灵AnimatedSprite实现逐帧动画效果
- 前端动画渲染引擎pixi.js系列(6)副本实现和平铺精灵TilingSprite
- 前端动画渲染引擎pixi.js系列(4)如何实现鼠标交互事件
- 前端动画渲染引擎pixi.js系列(10)骨骼动画实现之DragonBones
- 前端动画渲染引擎pixi.js系列(1)简单介绍及应用
- 前端动画渲染引擎pixi.js系列(9)如何生成缩略图
- 前端动画渲染引擎pixi.js系列(5)Text文本和Graphics画笔工具
- 闲话js前端框架(5)——再看自己一年前设计的微型渲染引擎
- 【Web】artTemplate模板引擎:编译(生成渲染函数)+渲染(生成HTML串) 模板:基于JS的语法(JS+自定义)+HTML
- 详解js模板引擎art template数组渲染的方法
- 8 HTML&JS等前端知识系列之jquery的自定义方法
- 拼的就是速度!超快HTML5 2D渲染引擎Pixi.js
- WEB前端 -- JS函数的定义与调用方法
- 风一样的HTML5 2D渲染引擎Pixi.js——真正意义的跨平台开发工具
- 前端框架vue.js系列(11):元素动画过渡效果
- 从零开始学_JavaScript_系列(15)——js系列<4>(数值、字符串、对象、数组、函数、日期的基本方法)
- 【cocos2d-js系列问题】cocos2d-js创建帧动画的两种方法
- js前端页面,对string字符串的处理函数和方法
- [从codewars学习到的JS系列3]数组filter方法与函数call方法妙用