画布变换矩阵的本质

画布变换矩阵，顾名思义，就是用于控制画布中元素（比如图像、文本等）位置和形状的矩阵。它可以对元素进行旋转、缩放和平移等变换。

1. 视口坐标系与世界坐标系

在计算机图形学中，我们经常会使用两个坐标系：视口坐标系和世界坐标系。

• 视口坐标系 ：是屏幕上的坐标系，原点位于屏幕的左上角，x轴向右延伸，y轴向下延伸。
• 世界坐标系 ：是三维空间中的坐标系，原点可以任意设置，x轴、y轴和z轴分别代表空间中的三个方向。

2. 视口变换矩阵

视口变换矩阵用于将世界坐标系中的点转换为视口坐标系中的点。它本质上是一个4x4的矩阵，可以表示为：

[
  m11 m12 m13 m14
  m21 m22 m23 m24
  m31 m32 m33 m34
  0   0   0   1
]

其中，前三行前三列是旋转、缩放和平移变换矩阵，最后一列是平移向量。

3. 世界坐标系到视口坐标系的转换

要将世界坐标系中的点转换为视口坐标系中的点，需要使用视口变换矩阵进行转换。转换公式为：

[x', y', z', w'] = [x, y, z, 1] * [
  m11 m12 m13 m14
  m21 m22 m23 m24
  m31 m32 m33 m34
  0   0   0   1
]

其中，(x', y', z', w')是视口坐标系中的点，(x, y, z, 1)是世界坐标系中的点。

三大基本变换

1. 旋转变换

旋转变换是指将元素绕着某个轴旋转一定角度。旋转变换矩阵为：

[
  cosθ -sinθ  0  0
  sinθ  cosθ  0  0
  0      0    1  0
  0      0    0  1
]

其中，θ是旋转角度。

2. 缩放变换

缩放变换是指将元素按比例放大或缩小。缩放变换矩阵为：

[
  sx   0    0  0
  0    sy   0  0
  0    0    1  0
  0    0    0  1
]

其中，sx和sy分别是x轴和y轴的缩放比例。

3. 平移变换

平移变换是指将元素沿x轴或y轴移动一定距离。平移变换矩阵为：

[
  1  0  0  tx
  0  1  0  ty
  0  0  1  0
  0  0  0  1
]

其中，tx和ty分别是x轴和y轴的平移距离。

复合变换

复合变换是指将多个变换组合在一起应用于元素。复合变换的顺序非常重要，因为不同的顺序会产生不同的结果。例如，先旋转再平移与先平移再旋转会产生不同的结果。

复合变换矩阵可以通过将各个变换矩阵相乘得到。例如，先旋转再缩放的复合变换矩阵为：

[
  cosθ*sx  -sinθ*sx  0  0
  sinθ*sx   cosθ*sx  0  0
  0         0         1  0
  0         0         0  1
]

齐次坐标

齐次坐标是计算机图形学中的一种特殊坐标系，它将三维空间中的点表示为四维向量。齐次坐标的第四个元素称为齐次坐标分量，它通常为1。

使用齐次坐标可以简化许多几何变换的计算，因为齐次坐标下的变换矩阵可以表示为4x4的矩阵，而三维空间中的变换矩阵通常是3x3的矩阵。

视口中的点to canvas的相对坐标

要计算视口中的点to canvas的相对坐标，需要先将视口中的点转换为世界坐标系中的点，然后再将世界坐标系中的点转换为canvas坐标系中的点。

转换公式为：

[x', y', z', w'] = [x, y, 0, 1] * [
  m11 m12 m13 m14
  m21 m22 m23 m24
  m31 m32 m33 m34
  0   0   0   1
]

其中，(x', y', z', w')是世界坐标系中的点，(x, y, 0, 1)是视口坐标系中的点。

然后，再将世界坐标系中的点转换为canvas坐标系中的点：

[x", y", z", w"] = [x', y', z', w'] * [
  a11 a12 a13 a14
  a21 a22 a23 a24
  a31 a32 a33 a34
  0   0   0   1
]

其中，(x", y", z", w")是canvas坐标系中的点，(x', y', z', w')是世界坐标系中的点。

最后，canvas坐标系中的点减去canvas的原点坐标，即可得到视口中的点to canvas的相对坐标。