PIXI.js源码解析（2）——Transform

Transform其代表了一种坐标系之间的变换

注意一下就会发现，在许多渲染引擎，游戏引擎中都有Transform类的身影，比如unity,as3。那么今天我们就来看看pixi.js中的Transform类。
pixi.js一共有三个和Transform有关的类，他们分别是TransformBase,TransformStatic,Transform,TransformBase是基类，而Transform和TransformStatic的区别只在于TransformStatic实现了observer模式,其在属性改变时会自动重新计算矩阵。
这样直白的说可能不好懂，还是先来看看TransformBase基类

可以看到，其内部分别保存了两个矩阵对象，分别为local和world，这个非常好理解，local就是相对于父级的属性，world就是相对于root根容器的属性。

矩阵是什么这里就不详细说了，网上有很多这种文章，简单而言就是代表一个变换，或者说代表一个坐标系。
下图为矩阵的构造函数,六个值分别组成了坐标系的两个向量(x,y轴)，以及离父坐标系的偏移。

所以localTransform最终代表了当前坐标系在父坐标系中的一个位置,
worldTransform最终代表了当前坐标系在全局坐标系中的一个位置，如果一个对象直接添加到根容器中，那么这两个值是相等的。

矩阵内部有一些常用方法，来进行矩阵乘法，倒转矩阵之类的运算。

transfrom构造器中，接下来_worldID和_parentID就不解释了，上一篇文章有说过pixi.js内部的这种优化机制，基本上后缀带ID的属性都是用于这种优化机制的。

然后我们看transfrom类的构造函数

可以看到是一些常见的渲染属性,坐标，旋转，缩放等等，看到这里可能有人要问了，transfromBase的两个矩阵不是已经包含了这些数据吗?为什么这里又声明一次?原因就是内部的矩阵对象实际上是用这些坐标，旋转，缩放,偏移计算的。

如图

可以看到,localTransform这个矩阵对象实际上完全是由坐标，旋转，缩放,偏移对象计算出来的。
至于为什么要这样绕一圈而不是在更改属性例如坐标的时候直接更改矩阵的相应值，可能是因为这样比较好算一些,直接更改矩阵值计算会更加麻烦。

---

接下来我们看看transfromStatic类
构造函数

可以看到,除了point变成了observablePoint以外,完全和transfrom类一样，其实我不是很明白这样写两个类的意义，transfromStatic在实现了observer模式后,可以避免无谓的重新计算矩阵,所以无论在任何情况下,transfromStatic都会比transform效率高，如果不计函数调用的开销的话(一般情况下可以忽略)

可以看到,transform其实就是一些变换属性的集合，或者说就是这四种属性的集合,坐标，旋转，缩放,偏移,在渲染时，需要知道对象的这些属性，然后才能画出对应的纹理。

接下来我们来说一下transform是怎么计算出来的,localTransform就不用说了，这个就是直接赋值的集合，比如我们设置object.x=100，那么我们就是设置object的局部坐标x为100，我们所有直接设置的值,例如rotation,x,y，scale，全部都是相对于父坐标系来说的值，即都是局部值。
而要计算出一个object的全局变换值，可以想到需要一个递归的过程，例如object的全局坐标x等于object的局部坐标X加上父级的坐标X，一直到没有父级，即到根容器为止。
pixi就是使用递归计算出每个object的全局变换值。
下图能很明显的看出是一个递归过程。