大家好，我是前端西瓜哥。今天我们将学习变换矩阵。线性变换矩阵乘法是线性代数的东西。首先我们有一个二维向量(x,y)，在线性代数中，我们将这样表示它：向量将由几何中从原点开始的箭头表示。矢量也经常被视为一个点。因为当要画的向量很多的时候，就会有很多的箭头，这样会让画面很混乱，所以应该简化为点。向量加法：只需添加相应的位置即可。在几何学中，多个向量可以首尾相连。最终路径是加法的结果：Numbermultiplication:orscalarmultiplication，指的是向量和一个常量相加。乘法也就是对应位置的乘法，在几何上表现为向量缩放：结合以上两个概念，我们得到对于一个二维向量，它是x轴和y轴上的一个单位向量（abasisvector）缩放后组合：然后就是我们主角的线性变换。线性变换的“变换”是指接受一个向量并返回一个向量的“函数”。在几何学中，它表示向量如何从其原始方向（缩放、旋转等）变换到另一个方向。线性变换的“线性”是指变换符合某些特性。首先直线变换后还是直线，然后原点还在原来的位置。线性变换，一种理解是矩形的每一列改变对应基向量的值。比如上式中，我们的(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;thetwo-dimensional2x2scalingmatrixis:二维矩阵运算过程是：实际上我们会用到三维的scalingmatrix，原因会在下面的翻译中说明。三维缩放矩阵为：在底部和右侧添加001。平移平移是将向量（或点）的x和y移动一定的距离。假设您在x方向移动dx距离，在y方向移动dy距离。直接用几何描述：x2=x+dx；y2=y+dy；我们不能用二维矩阵来表示平移变换，为此我们需要增加维度，到三维，通过一个额外的z轴基向量来模拟二维平移。输入向量还需要维度，加入第三个维度，值为1：三维平移矩阵为：运算过程：为了减少计算量，我们会使用复合矩阵，它是一个矩阵通过结合律组合多个变换矩阵来计算。它是各种矩阵的组合，但是相对于一个向量一个一个的矩阵乘法，可以一次性计算出对应的矩阵。由于平移的特殊性，我们通常不使用2x2的矩阵来表示变换矩阵，而是使用3x3的矩阵来兼容平移矩阵。旋转点沿原点逆时针旋转指定角度，得到新的坐标点，有如下公式：三维旋转矩阵：逆时针旋转90度，可视为旋转基变量：斜切，其实就是固定一个基向量不变，改变另一个基向量。斜接有一个方向。Horizo??ntalbevel:orverticalbevel:水平斜角动画：代码实现接口IVector{x:number;y:数字;}/***ace*bdf*001*/typeITransfrom=[a:数字,b:数字,c:数字,d:数字,e:数字,f:数字];/***变换矩阵*/导出函数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个值。在本文的最后，我们简单地讲了下变换矩阵。
