计算机原理/仿射变换

前言

2023年08月05日开始起稿。

在 css 中矩阵的变换与 transform 中的 translate、scale、rotate、skew 属性息息相关，彼此符合计算为 matrix 以此实现位移、缩放、旋转、倾斜等视觉效果。

基础运算

点积

点积 $\overrightarrow{a}\cdot \overrightarrow{b}=\Vert a\Vert \Vert b\Vert \cos \theta$

笛卡尔坐标

Cartesian coordinate，正交坐标系。

齐次坐标系

Homogencous coordinate 由德国数学家 August Ferdinand Möbius 提出，采用 N+1 维来表示 N 维坐标。

欧几里得空间/笛卡尔空间与齐次坐标转换

基本变换

通用公式

转换矩阵 * 原齐次坐标 = 转换后齐次坐标。即，$\stackrel{Amatrix}{\left[\begin{array}{c}m\times n\end{array}\right]}\times \stackrel{Bmatrix}{\left[\begin{array}{c}1\times n\end{array}\right]}=\stackrel{Ymatrix}{\left[\begin{array}{c}1\times m\end{array}\right]}$

假设 $A*B=Y$。其中，A 为 $m*n$ 的 m 行 n 列矩阵，B 为 $1*n$ 列的矩阵。B 拆分为列向量，并且列向量的维数就是矩阵的行数。

Warning: 矩阵列数必须等于向量的维数么？eq: $\left[\begin{array}{cccc}1& 2& 3& 4\\ a& b& c& d\\ \end{array}\right]\times \left[\begin{array}{c}1\\ 2\\ 3\\ 4\\ \end{array}\right]$

二维转换方法

transform(a, b, c, d, e, f) 与 Matrix 的转换。这里需要注意的是两者的对应关系为纵向。

$\left[\begin{array}{c}{x}_1\\ y_1\\ 1\\ \end{array}\right]=\left[\begin{array}{ccc}a& c& e\\ b& d& f\\ g& h& i\\ \end{array}\right]\times \left[\begin{array}{c}x\\ y\\ 1\\ \end{array}\right]=\left[\begin{array}{ccc}a& c& e\\ b& d& f\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}x\\ y\\ 1\\ \end{array}\right]$

• a [线性变换]: 表示为 x 方向的缩放因子，也常用 sx 标识；
• b [线性变换]: 表示为 y 方向的倾斜因子或旋转角度正弦值，这也说明倾斜与旋转之间会有冲突需要处理；
• c [线性变换]: 表示为 x 方向的倾斜因子或旋转角度正弦值；
• d [线性变换]: 表示为 y 方向的缩放因子，也常用 sy 标识；
• e [平移变换]: 表示为 x 方向平移值, 也用 tx 标识；
• f [平移变换]: 表示为 y 方向平移值, 也用 ty 标识。
• g [透视变换]:
• h [透视变换]:

并以此可推导出来

$\{\begin{array}{l}{x}_1=a\times x+c\times y+1\times e\\ y_1=b\times x+d\times y+1\times f\\ 1=0\times 0+0\times 0+1\times 1\\ \end{array}$

简化后

$\{\begin{array}{l}{x}_1=a\times x+c\times y+e\\ y_1=b\times x+d\times y+f\\ \end{array}$

matrix3d 三维转换方法

$\left[\begin{array}{c}{x}_1\\ y_1\\ z_1\\ w_1\\ \end{array}\right]=\left[\begin{array}{cccc}a& e& i& m\\ b& f& j& n\\ c& g& k& o\\ d& h& l& p\\ \end{array}\right]\times \left[\begin{array}{c}x\\ y\\ z\\ w\\ \end{array}\right]$

平移(Translation)

2D-平移

$\left[\begin{array}{c}{x}_1\\ y_1\\ 1\\ \end{array}\right]=\left[\begin{array}{ccc}1& 0& e\\ 0& 1& f\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}x\\ y\\ 1\\ \end{array}\right]$

$\{\begin{array}{l}{x}_1=e+x\\ y_1=f+y\\ \end{array}$

简化公式为，$P^{\prime }=T(e,f)\times P$。

平移逆矩阵

$T^{-1}=\left[\begin{array}{ccc}1& 0& -e\\ 0& 1& -f\\ 0& 0& 1\\ \end{array}\right]$

二维平移

在二维空间里面平移需要进行矩阵加法。假设现有点 $A(x_1,y_1)$ 平移至点 $B(x_2,y_2)$，平移距离为 X 轴距离偏移 e、Y 轴距离偏移 f，计算如下：

$\{\begin{array}{l}\overrightarrow{AB}=\overrightarrow{u}=\sqrt{{\overrightarrow{e}}^2+{\overrightarrow{f}}^2}\\ x_2=x_1+e\\ y_2=y_1+f\\ \end{array}$

推导矩阵

$M_2=\left[\begin{array}{c}{x}_2\\ y_2\\ \end{array}\right]=M_1+T=\left[\begin{array}{c}{x}_1\\ y_1\\ \end{array}\right]+\left[\begin{array}{c}e\\ f\\ \end{array}\right]=\left[\begin{array}{c}{x}_1+e\\ y_1+f\\ \end{array}\right]$

旋转(Rotation)

简述

在语言计算中 ，与数学表示法如 $\sin 30^{\circ }\approx 0.5$ 不同的是，需要将弧度和角度进行转换，之后代入数学函数计算出结果值。

定义 $\varphi$ 为弧度，并定义 $\theta$ 为角度。则 $\varphi$ 值为 $\varphi =\frac{\pi }{180}\times \theta$

如在前端 javascript 中进行计算$\sin 30^{\circ }$ 则为

// 定义角度为 theta
const theta = 30;
// 定义弧度 phi
const phi = Math.PI / 180 * theta;
// 数学函数计算 sin 值
Math.sin(phi)

$\left[\begin{array}{c}{x}_1\\ y_1\\ 1\\ \end{array}\right]=\left[\begin{array}{ccc}a& c& 0\\ b& d& 0\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}x\\ y\\ 1\\ \end{array}\right]=\left[\begin{array}{ccc}\cos \theta & -\sin \theta & 0\\ \sin \theta & \cos \theta & 0\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}x\\ y\\ 1\\ \end{array}\right]$

推导出来

$\{\begin{array}{l}{x}_1=\cos \theta \times x-\sin \theta \times y\\ y_1=\sin \theta \times x+\cos \theta \times y\\ \end{array}$

简化公式为，$P^{\prime }=R(\theta )\times P$。

旋转逆矩阵

$R^{-1}=\left[\begin{array}{ccc}\cos \theta & \sin \theta & 0\\ -\sin \theta & \cos \theta & 0\\ 0& 0& 1\\ \end{array}\right]$

假设

假设存在点 E 移动至点 F。设 E 坐标为(x1, y1)，F 坐标为(x2, y2)，D 坐标为(a, b)。

简要图示：

Transform-平移

初中数学：

$\{\begin{array}{l}\cos \beta =\frac{x_1-a}{r}\\ \sin \beta =\frac{y_1-b}{r}\\ \cos \gamma =\frac{x_2-a}{r}\\ \sin \gamma =\frac{y_2-b}{r}\\ \end{array}$

演算：

$\{\begin{array}{l}\cos \beta =\frac{x_1-a}{r}\\ \sin \beta =\frac{y_1-a}{r}\\ x_2-a=\cos \gamma \times r=\cos (\beta -\alpha )\times r=(\cos \alpha \times \cos \beta +\sin \beta \times \sin \alpha )\times r\\ y_2-b=\sin \gamma \times r=\sin (\beta -\alpha )\times r=(\sin \beta \times \cos \alpha -\sin \alpha \times \cos \beta )\times r\\ \end{array}$

推导：

$\{\begin{array}{l}a=0\\ b=0\\ x_2=\cos \alpha \times (x_1-a)+\sin \alpha \times (y_1-b)+a=\cos \alpha \times x_1+\sin \alpha \times y_1\\ y_2=\cos \alpha \times (y_1-b)-\sin \alpha \times (x_1-a)+b=\cos \alpha \times y_1-\sin \alpha \times x_1\\ \end{array}$

点旋转的角度 $\alpha$ 是正旋转还是负旋转，当角度是负旋转时 $\theta =-\alpha$。

验证：

$\{\begin{array}{l}\cos \beta =\frac{x_1-a}{r}\\ \sin \beta =\frac{y_1-a}{r}\\ x_2=\cos (\beta -(-\theta ))\times r=(\cos \beta \times \cos \theta -\sin \beta \times \sin \theta )\times r=\cos \theta \times x_1-\sin \theta \times y_1\\ y_2=\sin (\beta -(-\theta ))\times r=(\sin \theta \times \cos \beta +\sin \beta \times \cos \theta )\times r=\cos \theta \times y_1+\sin \theta \times x_1\\ \end{array}$

转换为矩阵：

$\left[\begin{array}{c}{x}_2\\ y_2\\ \end{array}\right]=\left[\begin{array}{cc}\cos \theta & -\sin \theta \\ \cos \theta & \sin \theta \\ \end{array}\right]\times \left[\begin{array}{c}{x}_1\\ y_1\\ \end{array}\right]$

rotate

从 css 语法上开始转换

.box {
  transform: rotate(30deg);
}

这个旋转套用公式

$\left[\begin{array}{ccc}\cos 30^{\circ }& -\sin 30^{\circ }& 0\\ \sin 30^{\circ }& \cos 30^{\circ }& 0\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}1\\ 1\\ 1\\ \end{array}\right]=\left[\begin{array}{ccc}0.86& -0.5& 0\\ 0.5& 0.86& 0\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}1\\ 1\\ 1\\ \end{array}\right]$

等价于

.box {
  transform: matrix(0.86, 0.5, -0.5, 0.86, 0, 0);
}

matrix-旋转-1

定点旋转

围绕特定枢轴点 $(c_x,c_y)$ 旋转角度 $\theta$。$matrix(\cos \theta ,\sin \theta ,-\sin \theta ,\cos \theta ,c_x\times (1-\cos \theta )+c_y\times \sin \theta ,c_y\times (1-\cos \theta )-c_x\times \sin \theta )$。

变换矩阵为： $\left[\begin{array}{c}{x}_1\\ y_1\\ 1\\ \end{array}\right]=\left[\begin{array}{ccc}\cos \theta & -\sin \theta & c_x-c_x\times \cos \theta +c_y\times \sin \theta \\ \sin \theta & \cos \theta & c_y-c_x\times \sin \theta -c_y\times \cos \theta \\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}x\\ y\\ 1\\ \end{array}\right]$

缩放(Scale)

在叙述之前先复习一下二维空间中的向量相关表达式，比如向量的长度计算（勾股定理），定义 x 轴、y 轴方向相同的两个单位向量 u，v 作为一组基底。

2D-向量长度

单位向量 u，v（依据维基阐述：“一个非零向量$u$的正规化向量$\overrightarrow{u}$就是平行于$u$的单位向量”。求一个方向上给定向量的单位向量即为正规化[Normalization]向量。）的表述法为：

$\{\begin{array}{l}\hat{u}=\frac{1}{\Vert \overrightarrow{u}\Vert }\times \overrightarrow{u}=\frac{\overrightarrow{u}}{\Vert \overrightarrow{u}\Vert }\\ \hat{v}=\frac{1}{\Vert \overrightarrow{v}\Vert }\times \overrightarrow{v}=\frac{\overrightarrow{v}}{\Vert \overrightarrow{v}\Vert }\\ \end{array}$

并且标准单位向量 $\{\begin{array}{l}\hat{u}=\frac{1}{\Vert \overrightarrow{u}\Vert }\times \overrightarrow{u}=\frac{\overrightarrow{u}}{\Vert \overrightarrow{u}\Vert }=1\\ \hat{v}=\frac{1}{\Vert \overrightarrow{v}\Vert }\times \overrightarrow{v}=\frac{\overrightarrow{v}}{\Vert \overrightarrow{v}\Vert }=1\\ \end{array}$

勾股定理推导向量 AC 的模 $\Vert \overrightarrow{w}\Vert$ 的值。

$\Vert \overrightarrow{w}\Vert =\sqrt{w_x^2+w_y^2}$

扩展到三维。

3D-向量长度

$\Vert \overrightarrow{w}\Vert =\sqrt{{\overrightarrow{AD}}^2+{\overrightarrow{DE}}^2}=\sqrt{{\overrightarrow{AB}}^2+{\overrightarrow{BD}}^2+{\overrightarrow{DE}}^2}=\sqrt{w_x^2+w_y^2+w_z^2}$

扩展到多维。多维向量的表示法为 $\overrightarrow{w}=(w_1,w_2,\cdots ,w_n{)}^T$。

$\Vert \overrightarrow{w}\Vert =\sqrt{w_1^2+w_2^2+\cdots +w_n^2}$

推导出。

$(\Vert \overrightarrow{w}\Vert {)}^2=w_1^2+w_2^2+\cdots +w_z^2=\left[\begin{array}{c}{w}_1\\ w_2\\ ⋮\\ w_n\\ \end{array}\right]\times \left[\begin{array}{cccc}{w}_1& w_2& \cdots & w_n\\ \end{array}\right]$

总结。

$\{\begin{array}{l}\overrightarrow{w}=\left[\begin{array}{c}{w}_1\\ w_2\\ ⋮\\ w_n\\ \end{array}\right]\\ \Vert \overrightarrow{w}\Vert =\sqrt{w_1^2+w_2^2+\cdots +w_n^2}\\ \end{array}$

推导出在二维坐标系中 X、Y 两个方向的单位向量，使用 i、j、k 进行表示。

$\{\begin{array}{l}\hat{i}=\left[\begin{array}{c}1\\ 0\\ \end{array}\right]\\ \hat{j}=\left[\begin{array}{c}0\\ 1\\ \end{array}\right]\\ \end{array}$

三维坐标系中 X、Y、Z 三个方向的单位向量。

$\{\begin{array}{l}\hat{i}=\left[\begin{array}{c}1\\ 0\\ 0\\ \end{array}\right]\\ \hat{j}=\left[\begin{array}{c}0\\ 1\\ 0\\ \end{array}\right]\\ \hat{k}=\left[\begin{array}{c}0\\ 0\\ 1\\ \end{array}\right]\\ \end{array}$

$\left[\begin{array}{c}{x}_1\\ y_1\\ 1\\ \end{array}\right]=\left[\begin{array}{ccc}a& 0& 0\\ 0& d& 0\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}x\\ y\\ 1\\ \end{array}\right]$

推导出来

$\{\begin{array}{l}{x}_1=a\times x\\ y_1=d\times y\\ \end{array}$

简化公式为，$P^{\prime }=S(a,b)\times P$。

缩放逆矩阵

$S^{-1}=\left[\begin{array}{ccc}\frac{1}{a}& 0& 0\\ 0& \frac{1}{d}& 0\\ 0& 0& 1\\ \end{array}\right]$

scale

.box {
  transform: scale(0.3, 0.6);
}

通过公式计算

$\left[\begin{array}{ccc}a& 0& 0\\ 0& d& 0\\ 0& 0& 1\\ \end{array}\right]=\left[\begin{array}{ccc}0.3& 0& 0\\ 0& 0.6& 0\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}1\\ 1\\ 1\\ \end{array}\right]$

等价于

.box {
  // transform: matrix(a, b, c, d, e, f);
  transform: matrix(0.3, 0, 0, 0.6, 0, 0);
}

matrix-缩放-1

定点缩放

通过前文已知缩放由矩阵转为 matrix 后，其格式为 $matrix(a,0,0,d,0,0)$，这是基于原点 $(0,0)$ 的情况，如果是围绕特定枢轴点 $(c_x,c_y)$ 进行缩放，则是 $matrix(sx,0,0,sy,c_x\times (1-sx),c_y\times (1-sy))$，也就是 $matrix(a,0,0,d,c_x\times (1-a),c_y\times (1-d))$

偏斜/错切(Skew)

倾斜矩阵(错切矩阵)指定沿某一轴线发生 $\theta$ 度的倾斜变换。即，$matrix(1,\tan {\theta }_y,\tan {\theta }_x,1,0,0)$。

$\left[\begin{array}{c}{x}_1\\ y_1\\ 1\\ \end{array}\right]=\left[\begin{array}{ccc}1& \tan {\theta }_x& 0\\ \tan {\theta }_y& 1& 0\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{c}x\\ y\\ 1\\ \end{array}\right]$

沿 x 轴倾斜	沿 y 轴倾斜
$\left[\begin{array}{ccc}1& \tan \theta & 0\\ 0& 1& 0\\ 0& 0& 1\\ \end{array}\right]$	$\left[\begin{array}{ccc}1& 0& 0\\ \tan \theta & 1& 0\\ 0& 0& 1\\ \end{array}\right]$
$matrix(1,0,\tan \theta ,1,0,0)$	$matrix(1,\tan \theta ,0,1,0,0)$

复合

复合也被称之为累积变换。复合需要注意运算顺序，即旋转、缩放、偏移。所以复合公式的矩阵计算也遵循这个顺序。具体计算仍要根据需求进行组合，不同复合矩阵相乘的结果说不同的。

${{ℳ}}_{\text{复 合}}=R_n\times S_n\times T_n$

这里用 css 中的 transform 举例，当我有一个元素节点需要进行旋转和缩放时，rotate 与 scale 等几个基础的转换函数的顺序最终会转化为如下图示。

{{#mermaid:flowchart LR translate --> scale --> rotate }}

举例。

.box {
  transform: rotate(30deg) scale(0.3, 0.6);
}

组合需要进行矩阵乘法计算

${{ℳ}}_{\text{复 合}}=T_1\times S_1\times R_1=\text{...}=\left[\begin{array}{ccc}\cos 30^{\circ }& -\sin 30^{\circ }& 0\\ \sin 30^{\circ }& \cos 30^{\circ }& 0\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{ccc}0.3& 0& 0\\ 0& 0.6& 0\\ 0& 0& 1\\ \end{array}\right]=\left[\begin{array}{ccc}0.258& -0.3& 0\\ 0.15& 0.516& 0\\ 0& 0& 1\\ \end{array}\right]$

等价于

.box {
  transform: matrix(0.258, 0.15, -0.3, 0.516, 0, 0);
}

复合顺序

累积矩阵不满足乘法的交换律(但具有结合律、分配律特质)，所以累积顺序差异（列矩阵从右向左运算）会计算出不同的结果。论证顺序不同结果不同如下：

先旋转再平移简化公式为，$P^{\prime }=(T\times R)\times P={{ℳ}}_{\text{复 合}}\times P=R\times P+T$。

${{ℳ}}_{\text{复 合}}\times P=\left[\begin{array}{ccc}1& 0& e\\ 0& 1& f\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{ccc}a& c& 0\\ b& d& 0\\ 0& 0& 1\\ \end{array}\right]\times P=\left[\begin{array}{ccc}a& c& e\\ b& d& f\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{cc}P& 0\\ 0& 1\\ \end{array}\right]=\left[\begin{array}{cc}R& T\\ 0& 1\\ \end{array}\right]\times \left[\begin{array}{cc}P& 0\\ 0& 1\\ \end{array}\right]=\times \left[\begin{array}{cc}RP& T\\ 0& 1\\ \end{array}\right]=R\times P+T$

先平移再旋转简化公式为，$P^{\prime }=(R\times T)\times P={{ℳ}}_{\text{复 合}}\times P=R\times P+R\times T$。

$\begin{array}{l}{{ℳ}}_{\text{复 合}}\times P=\left[\begin{array}{ccc}a& c& 0\\ b& d& 0\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{ccc}1& 0& e\\ 0& 1& f\\ 0& 0& 1\\ \end{array}\right]\times P=\left[\begin{array}{ccc}a& c& c\times f+a\times e\\ b& d& d\times f+b\times e\\ 0& 0& 1\\ \end{array}\right]\times \left[\begin{array}{cc}P& 0\\ 0& 1\\ \end{array}\right]=\left[\begin{array}{cc}R& \left[\begin{array}{c}c\times f+a\times e\\ d\times f+b\times e\\ \end{array}\right]\\ 0& 1\\ \end{array}\right]\times \left[\begin{array}{cc}P& 0\\ 0& 1\\ \end{array}\right]\\ =\left[\begin{array}{cc}R& (\left[\begin{array}{ccc}a& & c\\ b& & d\\ \end{array}\right]\times \left[\begin{array}{c}e\\ f\\ \end{array}\right])\\ 0& 1\\ \end{array}\right]\times \left[\begin{array}{cc}P& 0\\ 0& 1\\ \end{array}\right]=\left[\begin{array}{cc}R& (\left[\begin{array}{ccccc}a& & c& & 0\\ b& & d& & 0\\ 0& & 0& & 1\\ \end{array}\right]\times \left[\begin{array}{c}e\\ f\\ 0\\ \end{array}\right])\\ 0& 1\\ \end{array}\right]\times \left[\begin{array}{cc}P& 0\\ 0& 1\\ \end{array}\right]=\left[\begin{array}{cc}R& R_{3\times 3}\times T_{3\times 1}\\ 0& 1\\ \end{array}\right]\times \left[\begin{array}{cc}P& 0\\ 0& 1\\ \end{array}\right]=\left[\begin{array}{cc}R& R\times T\\ 0& 1\\ \end{array}\right]\times \left[\begin{array}{cc}P& 0\\ 0& 1\\ \end{array}\right]=\times \left[\begin{array}{cc}RP& RT\\ 0& 1\\ \end{array}\right]=R\times P+R\times T\end{array}$

推导出结果 $R\times P+R\times T\ne R\times P+R\times T$，以此可以看出累积顺序的值的区别。

矩阵结合律: $(AB)C=A(BC)$

变换矩阵

变换矩阵允许原坐标点通过变换获取新坐标点，新坐标点 $P(x_m,y_m)$ 与原坐标点 $P(x_n,y_n)$ 的公式转换如下：

$P_m={{ℳ}}_{\text{复 合}}\times P_n$

CSS

translation, rotation, scaling, skewing

其他

组件库 ml-matrix、gl-matrix

附件

matrix-组合计算-1