大家好，我是前端西瓜哥。今天我們來學變換矩陣。

線性變換

矩陣乘法是來自線性代數的內容。

首先我們有一個二維的向量 (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 個值。

結尾

本文簡單講了一下變換矩陣。