PIXI.js源码解析(1)——DisplayObject
来源:互联网 发布:sqlserver 2012 版本 编辑:程序博客网 时间:2024/06/09 13:31
Pixi.js是一个用JavaScript写的2D渲染引擎,可以用来在浏览器里做交互图形、动画和游戏等应用,主打支持硬件GPU渲染的WebGL API,如浏览器不支持WebGL,Pixi则会退用HTML5 Canvas来渲染。
接下来先来分析基础显示架构,其实很多渲染引擎都有类似的结构,如果学过as3的估计会感觉特别亲切。
显示架构
DisplayObject是所有可以被渲染在屏幕上的类的基类,DisplayObject继承了EventEmitter。
EventEmitter主要提供一个通用的事件的发送和接受功能,在网上有很多对这个类的解析,自己写一个也很轻松,将直接的函数调用解耦成事件的监听器和事件对象,具体的这里就不详细说了。
DisplayObject的主要属性有
transform
保存了该显示对象的坐标,缩放,旋转,内部使用了很多矩阵运算,所以效率很高,实际上as3也是使用一个transform来保存属性。而我们经常直接调用的x,y属性其实还是从transform里取的,在transform里可以看到,如图
alpha
代表透明度
visible
是否可见
parent
父对象,pixi的显示架构类似一种树结构,每个对象由自己的父对象的引用,而且还有对所以子对象的引用(在container中)
worldAlpha
世界透明度,实际被渲染到屏幕上时的透明度,比如父容器的透明度为0.5,该对象的透明度为0.5,则worldAlpha,最后渲染时的透明度为0.5*0.5=0.25
_filters
所有滤镜对象,pixi支持许多滤镜对象,例如blur模糊滤镜,shadow投影滤镜。
_bounds
边界框,这也是一个非常重要的属性,代表了容纳该对象所需要的一个最小的rect,应该可以翻译为边界框,对象的width和height都是根据该对象得到,以后我们会专门介绍这个类。
_mask
遮罩对象
其他的一些属性估计看英文名就知道什么意思了,这边就不多说了。接下来介绍一下pixi里的广泛运用的一种优化策略。
在pixi.js源码里经常会出现xxxid的属性,例如
这边我们就拿bound举例子吧,计算bound是一个相当耗时的操作,需要递归遍历所有的子级,然后比较,找出极值点,然后找出四个这样的点,组成一个rect。那么一个物体的bound什么时候会改变呢,想一想就可以知道,添加子级,删除子级,改变子级位置时,父级的bound有可能会改变。
例如在container的addchild中
可以看到最后面有一句
this._boundsID++,我们前面已经说到,添加子级,删除子级,改变子级位置时,父级的bound有可能会改变,但是这边却没有立即重新计算bound,而只是递增了_boundsID,有经验的话,应该可以预测到最后在某个地方boundID会与lastboundID进行比较。那么bound到底在什么时候被重新计算呢?
找了一下源码,发现
只有真正需要bound,即调用GetBound时,bound才会比较boundID和lastboundID,如果不一样就重新计算bound。
可以想到,在使用这样一个渲染引擎中,使用一个for添加许多子对象到某容器中是一个相当常见的操作,如果每次addChild都重新计算bound,那估计效率就会很差。
而每次不直接改变bound,而是在可能改变时递增id,然后在对象真正被get的时候,使用id与lastID比较才被重新计算出来,其实是一种非常好的优化方法,一个属性只有他真正的需要的时候才会被计算出来,而不是每次该属性可能改变的时候都重新计算
- PIXI.js源码解析(1)——DisplayObject
- PIXI.js源码解析(2)——Transform
- PIXI.js源码解析(3)——Container
- PIXI.js源码解析(4)——Texture
- PIXI.js源码解析(5)之事件管理器——InteractionManager
- Pixi.js
- H5 2D渲染引擎—Pixi.js简介及小demo
- H5 2D渲染引擎—Pixi.js 渲染器、舞台和精灵的创建
- H5 2D渲染引擎—Pixi.js 精灵的位置、大小、旋转、移动
- 前端动画渲染引擎pixi.js系列(1)简单介绍及应用
- Fixjs——显示基类DisplayObject
- Pixi官方文档译文(1)
- 风一样的HTML5 2D渲染引擎Pixi.js——真正意义的跨平台开发工具
- ActionScript3(AS3)类库学习之(十)——DisplayObject等显示对象基类
- 前端动画渲染引擎pixi.js系列(4)如何实现鼠标交互事件
- 前端动画渲染引擎pixi.js系列(5)Text文本和Graphics画笔工具
- 前端动画渲染引擎pixi.js系列(6)副本实现和平铺精灵TilingSprite
- 前端动画渲染引擎pixi.js系列(7)粒子容器、遮罩层和滤镜的应用
- 面试编程题-青蛙跳楼梯问题
- maven-war-plugin生成swagger。json并打包到war包中(springmvc)
- 材质球换贴图(Material与ShareMaterial)
- GitLab升级(8.10.5-9.5.4)
- Mysql主从配置(Mysql5.5)--Windows环境
- PIXI.js源码解析(1)——DisplayObject
- selenium模拟浏览器爬虫--以福建省土地使用权出让管理系统为例
- 学习笔记之面向对象编程15(容器之Iterator)
- 三种还是四种NLP的注意力机制的总结
- 245. 子树
- 遇到WEB-INF下不自动产生class文件的问题
- Oracle创建SEQUENCE
- 面向对象编程思想-解释器模式
- 视频编解码优化的几个概念