计算机图形学变换矩阵

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