本文节选自正在编写的 fabritor 手册。
viewportTransform 是 Canvas 的一个属性，用于进行空间变换，将一个点从一个坐标系转换到另一个坐标系，形式是一个6个值的数组：
js
[
a, c, e,
b, d, f
]a 和 d 控制了缩放，b 和 c 控制了倾斜，e 和 f 控制了平移。
写成上述类似矩阵的形式，感官上更好理解一些，我们逐个来看：
缩放
变换公式如下：
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> [ x ′ y ′ ] = [ a 0 0 d ] [ x y ] \begin{bmatrix} x'\\y' \end{bmatrix} = \begin{bmatrix} a&0 \\ 0&d \end{bmatrix} \begin{bmatrix} x\\y \end{bmatrix} </math>[x′y′]=[a00d][xy]
不知道你们还记不记得矩阵的乘法， x 和 y 分别乘以一个系数，显然可以达到缩放的效果。这就是数组中 a 和 d 两个参数为何可以控制缩放的原因。
比如，我们要实现对象按照 y 轴对称，其实就是就 x 的值乘以 -1，y 值保持不变：
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> [ x ′ y ′ ] = [ − 1 0 0 1 ] [ x y ] \begin{bmatrix} x'\\y' \end{bmatrix} = \begin{bmatrix} -1&0 \\ 0&1 \end{bmatrix} \begin{bmatrix} x\\y \end{bmatrix} </math>[x′y′]=[−1001][xy]
倾斜
我们看到上述缩放矩阵还空着两个值，那两个值就是控制倾斜的，也就是 b 和 c：
想象一个位于[0,0]点，宽高为1的矩形，四个点分别为：[0,0] [0,1] [1,0] 和 [1,1]， 此时我们将 c 的值置为 0.5，那么四个点变换为： [0,0] [1.5,1] [1,0] [1.5,1]。可以在图上画一下，你得到了一个倾斜的矩形！
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> [ x ′ y ′ ] = [ 1 c b 1 ] [ x y ] \begin{bmatrix} x'\\y' \end{bmatrix} = \begin{bmatrix} 1&c \\ b&1 \end{bmatrix} \begin{bmatrix} x\\y \end{bmatrix} </math>[x′y′]=[1bc1][xy]
平移
也就是数组内 e 和 f，当 x 和 y 分别加上一个值时，就是平移的效果。
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> [ x ′ y ′ ] = [ 1 0 0 1 ] [ x y ] + [ e f ] \begin{bmatrix} x'\\y' \end{bmatrix} = \begin{bmatrix} 1&0 \\ 0&1 \end{bmatrix} \begin{bmatrix} x\\y \end{bmatrix} + \begin{bmatrix} e\\f \end{bmatrix} </math>[x′y′]=[1001][xy]+[ef]
关于更多 fabric.js 变换的内容可以参考官方文档Using transformations, Introduction to Fabric.js Part 6
另外，要详细了解线性变换的内容，可以参考 B 站视频GAMES101-现代计算机图形学入门-闫令琪，讲的深入浅出，一门优秀的计算机图形学入门教程。