![](https://img-blog.csdnimg.cn/20190625141438657.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Pixi.js源码分析
对基于h5的2D渲染框架pixi.js源码进行深入浅出的分析
Marco&GalaxyDragon
这个作者很懒,什么都没留下…
展开
-
PIXI.js源码解析(6)-js语法特性
在js实现面向对象架构的一些技巧保护构造函数不被乱调用在pixi的源码中有如下的一个内部函数,通过检查this指针的指向来进行检查,其原理是不加new调用构造函数时,this就指向一个全局单例对象(在浏览器环境中则是window)。而加new调用时,this指向构造函数对应的对象。(PS:更深入的解释一下,因为js直接声明函数默认就是挂载到全局对象上,不加new,就相当于在全局对象中调...原创 2019-06-25 14:12:29 · 811 阅读 · 0 评论 -
PIXI.js源码解析(7)- shape对象
pixi有很多shape对象,类似Circle,Rectangle。这些不是真正用来显示到界面上的对象,只是代表对应的数学上图形,主要作用是辅助运算,以及保存一些数据。基本上所有ui框架中都有类似的类,改一下语法就可以放到别的语言别的库里使用。我写过一个java的渲染库,用的shape就是直接把pixi的这组类改了一下语法放进去就可以直接用了。pixi的这一组shape对象方法较少,很适合学习...原创 2018-11-01 22:10:51 · 1533 阅读 · 0 评论 -
PIXI.js源码解析(5)之事件管理器——InteractionManager
在基本上所有的渲染框架中,都会提供原始事件的分发功能,比如监听某个对象的鼠标按下弹起,触控,等等。而且不单单是渲染引擎,原始事件的监听和分发几乎是所有gui框架的构建基础。 pixi中的原始事件分发主要是由InteractionManager完成的,InteractionManager首先捕获到原始事件,之后需要确定事件的触发对象,之后使用事件流逐层传递,事件在传递过程中一共会经过三个阶段,不清楚原创 2017-09-24 23:02:44 · 2189 阅读 · 0 评论 -
PIXI.js源码解析(4)——Texture
一个渲染框架当然少不了对图像的处理,之前谈到的displayobject和container都只是显示对象的容器,但是最终能显示的只有texture. texture可以抽象的理解为图像数据,即像素值,而displayerObject的属性可以理解为这个图像在一个世界中是如何显示的,比如显示在哪里,是不是要缩放,旋转之类的。 不过pixi.js的texture类并不能算得上是真正的原生image原创 2017-09-18 17:09:47 · 1995 阅读 · 0 评论 -
PIXI.js源码解析(3)——Container
container代表了一个容器,但是同时也是一个可以显示的对象,所以他继承了显示基类displayobject。container内部维护了一个数组,代表子级。如图所示 container的大部分方法都很简单,基本上是看函数名就知道意思了,例如addChild,addChildAt,内部无非就是对数组进行操作。 这里只拿addChild简单分析一下。 首先先判断arguments.len原创 2017-09-16 17:01:03 · 2320 阅读 · 0 评论 -
PIXI.js源码解析(2)——Transform
Transform其代表了一种坐标系之间的变换注意一下就会发现,在许多渲染引擎,游戏引擎中都有Transform类的身影,比如unity,as3。那么今天我们就来看看pixi.js中的Transform类。 pixi.js一共有三个和Transform有关的类,他们分别是TransformBase,TransformStatic,Transform,TransformBase是基类,而Transf原创 2017-09-15 00:15:07 · 2609 阅读 · 0 评论 -
PIXI.js源码解析(1)——DisplayObject
Pixi.js是一个用JavaScript写的2D渲染引擎,可以用来在浏览器里做交互图形、动画和游戏等应用,主打支持硬件GPU渲染的WebGL API,如浏览器不支持WebGL,Pixi则会退用HTML5 Canvas来渲染。 接下来先来分析基础显示架构,其实很多渲染引擎都有类似的结构,如果学过as3的估计会感觉特别亲切。显示架构DisplayObject是所有可以被渲染在屏幕上的类的基类,Disp原创 2017-09-14 17:29:27 · 3637 阅读 · 1 评论