简单聊聊 fabric.js Canvas 的 viewportTransform

SleepyZone2024-04-21 5:01

本文节选自正在编写的 fabritor 手册。

viewportTransform 是 Canvas 的一个属性，用于进行空间变换，将一个点从一个坐标系转换到另一个坐标系，形式是一个6个值的数组：

js 复制代码

[
 a, c, e,
 b, d, f
]

a 和 d 控制了缩放，b 和 c 控制了倾斜，e 和 f 控制了平移。

写成上述类似矩阵的形式，感官上更好理解一些，我们逐个来看：

缩放

变换公式如下：
$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} $x'y'$ = $a00d$ $xy$

不知道你们还记不记得矩阵的乘法， x 和 y 分别乘以一个系数，显然可以达到缩放的效果。这就是数组中 a 和 d 两个参数为何可以控制缩放的原因。

比如，我们要实现对象按照 y 轴对称，其实就是就 x 的值乘以 -1，y 值保持不变：
$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} $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$ 。可以在图上画一下，你得到了一个倾斜的矩形！
$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} $x'y'$ = $1bc1$ $xy$

平移

也就是数组内 e 和 f，当 x 和 y 分别加上一个值时，就是平移的效果。
$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} $x'y'$ = $1001$ $xy$ + $ef$

关于更多 fabric.js 变换的内容可以参考官方文档Using transformations, Introduction to Fabric.js Part 6

另外，要详细了解线性变换的内容，可以参考 B 站视频GAMES101-现代计算机图形学入门-闫令琪，讲的深入浅出，一门优秀的计算机图形学入门教程。