计算机图形学变换矩阵

　　大家好，我是前端西瓜哥。今天我们来学变换矩阵。 线性变换
　　矩阵乘法是来自线性代数的内容。
　　首先我们有一个二维的向量  (x, y)  ，它在线性代数中，我们会这么表示：
　　向量在几何中会用一条起始于原点的箭头表示。
　　向量我们也常常看作一个点。因为当有大量向量要绘制时，箭头就会非常的多，会让画面非常混乱，所以要简化为点。
　　向量加法 ：对应位置进行相加即可，在几何中可以将多个向量头尾相连，最终的路径就是加法的结果：
　　数乘 ：或者叫标量乘法，指的是将向量和一个常量数字进行相乘，也是对应位置相乘，在几何中表现为对向量缩放：
　　有了上面两个概念，我们得到对于一个二维向量，它是 x 轴上和 y 轴上的单位向量（一种  基向量 ）进行缩放后组合而成：
　　然后就是我们主角  线性变换  了。
　　线性变换的 ＂变换＂，指的是 ＂函数＂，它接受一个向量，然后返回一个向量 。在几何中，它表示了一个向量是怎么从原来的指向变换（缩放旋转等过程）成另一个指向。
　　线性变换的 ＂线性＂，指的是这个变换是符合一些特性的，首先是直线变换后还是直线，然后就是原点保持在原来的位置。
　　线性变换，一种理解为，矩形的每列改变了对应基向量的值。
　　比如上面的公式，我们的  (x, y)   向量原来是基于 i 向量 (1, 0)   和 j 向量 (0, 1)   进行数乘得到的。
　　但通过一个矩阵，我们的 i 和 j 分别变成了 (a, c)   和 (b, d)  ，即标准换了，基于这个新标准得到的新的值就是线性变换的输出向量。
　　下面我们看一些常见的变换矩阵。 缩放
　　缩放，就是将一个向量（或者点）的 x 和 y 各自进行指定比例的缩放。
　　假设 x 方向缩放比例为 sx，y 方向缩放比例为 sy。简单的算法就是： x2 = x * sx; y2 = y * sy;
　　二维 2x2 缩放矩阵为：
　　二维矩阵运算过程为：
　　实际上我们会使用三维缩放矩阵，原因会在下面平移中讲解。
　　三维缩放矩阵为：
　　下边和右边各加上 0 0 1 即可。 平移
　　平移，就是将一个向量（或者点）的 x 和 y 各自移动一段距离。
　　假设 x 方向移动 dx 距离，y 方向移动 dy 距离。
　　直接用几何的描述： x2 = x + dx; y2 = y + dy;
　　我们无法用一个二维矩阵来表示平移变换，为此我们需要升维，升到三维，通过额外的一个 z 轴的基向量的斜切来模拟二维中的平移。
　　输入向量也需要升维，加多一个值为 1 的第三维度：
　　三维平移矩阵为：
　　运算过程：
　　为了减少计算量，我们会使用  复合矩阵 ，就是将多个变换矩阵通过结合律计算出来的矩阵。
　　它是多种矩阵的组合体，但相比对一个向量一个个进行矩阵乘法，符合矩阵能一次计算出来。因为平移的特殊性，所以我们通常不会使用 2x2 矩阵来表示一个变换矩阵，而是用 3x3 矩阵，来和平移矩阵做兼容。 旋转
　　点沿原点逆时针旋转指定角度，得到新的坐标点，有以下公式：
　　三维旋转矩阵：
　　逆时针旋转 90度，可以看作是给基变量做旋转：
　　斜切
　　斜切，其实就是固定一个基向量不变，改变另一条基向量。斜切是有方向的。
　　水平斜切：
　　或垂直斜切：
　　水平斜切动图：
　　代码实现interface IVector {   x: number;   y: number; } /**  * a c e  * b d f  * 0 0 1  */ type ITransfrom = [   a: number,   b: number,   c: number,   d: number,   e: number,   f: number ]; /**  * 变换矩阵  */ export function transform(   { x, y }: IVector,   [a, b, c, d, e, f]: ITransfrom ): IVector {   return {     x: x * a + y * c + e,     y: x * b + y * d + f,   }; }
　　通常我们会用升维的 3x3 矩阵，来表示一个变换矩形，因为最后一行永远都是  [0, 0, 1]  ，所以我们的函数只需要传矩阵的前两行，共 6 个值。比如 Canvas 的 ctx.transform 也是只接受 6 个值。结尾
　　本文简单讲了一下变换矩阵。
　　我是前端西瓜哥，欢迎关注我，学习更多前端知识。