o83290102o5的博客

在js实现面向对象架构的一些技巧保护构造函数不被乱调用在pixi的源码中有如下的一个内部函数，通过检查this指针的指向来进行检查，其原理是不加new调用构造函数时,this就指向一个全局单例对象(在浏览器环境中则是window)。而加new调用时，this指向构造函数对应的对象。（PS:更深入的解释一下，因为js直接声明函数默认就是挂载到全局对象上，不加new，就相当于在全局对象中调...

pixi有很多shape对象，类似Circle,Rectangle。这些不是真正用来显示到界面上的对象，只是代表对应的数学上图形，主要作用是辅助运算，以及保存一些数据。基本上所有ui框架中都有类似的类，改一下语法就可以放到别的语言别的库里使用。我写过一个java的渲染库，用的shape就是直接把pixi的这组类改了一下语法放进去就可以直接用了。pixi的这一组shape对象方法较少，很适合学习...

在基本上所有的渲染框架中,都会提供原始事件的分发功能，比如监听某个对象的鼠标按下弹起，触控，等等。而且不单单是渲染引擎，原始事件的监听和分发几乎是所有gui框架的构建基础。 pixi中的原始事件分发主要是由InteractionManager完成的，InteractionManager首先捕获到原始事件,之后需要确定事件的触发对象，之后使用事件流逐层传递，事件在传递过程中一共会经过三个阶段，不清楚

一个渲染框架当然少不了对图像的处理，之前谈到的displayobject和container都只是显示对象的容器，但是最终能显示的只有texture. texture可以抽象的理解为图像数据，即像素值，而displayerObject的属性可以理解为这个图像在一个世界中是如何显示的，比如显示在哪里，是不是要缩放，旋转之类的。 不过pixi.js的texture类并不能算得上是真正的原生image

container代表了一个容器,但是同时也是一个可以显示的对象，所以他继承了显示基类displayobject。container内部维护了一个数组，代表子级。如图所示 container的大部分方法都很简单，基本上是看函数名就知道意思了，例如addChild,addChildAt,内部无非就是对数组进行操作。 这里只拿addChild简单分析一下。 首先先判断arguments.len

Transform其代表了一种坐标系之间的变换注意一下就会发现，在许多渲染引擎，游戏引擎中都有Transform类的身影，比如unity,as3。那么今天我们就来看看pixi.js中的Transform类。 pixi.js一共有三个和Transform有关的类，他们分别是TransformBase,TransformStatic,Transform,TransformBase是基类，而Transf

Pixi.js是一个用JavaScript写的2D渲染引擎，可以用来在浏览器里做交互图形、动画和游戏等应用，主打支持硬件GPU渲染的WebGL API，如浏览器不支持WebGL，Pixi则会退用HTML5 Canvas来渲染。 接下来先来分析基础显示架构，其实很多渲染引擎都有类似的结构，如果学过as3的估计会感觉特别亲切。显示架构DisplayObject是所有可以被渲染在屏幕上的类的基类,Disp