计算机图形学：变换矩阵

大家好，我是前端西瓜哥。今天我们来学变换矩阵。

线性变换

矩阵乘法是来自线性代数的内容。

首先我们有一个二维的向量 (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 个值。

结尾

本文简单讲了一下变换矩阵。

我是前端西瓜哥，欢迎关注我，学习更多前端知识。

本文首发于我的公众号：前端西瓜哥