二维几何变换

二维平移

我们可以使用二维列向量来表示平移和顶点位置
比如当前顶点坐标为：
$$P=\left(\begin{array}{c}x\\ y\end{array}\right)$$
要平移的距离也用二维列向量来表示：
$$T=\left(\begin{array}{c}{t}_x\\ t_y\end{array}\right)$$
那么，平移后的顶点坐标为：
$$P^{{}^{\prime }}=\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right)=\left(\begin{array}{c}x\\ y\end{array}\right)+\left(\begin{array}{c}{t}_x\\ t_y\end{array}\right)=P+T$$

二维旋转

先考虑围绕原点进行的旋转

$$\begin{array}{rl}{x}^{{}^{\prime }}& =cos(\varphi +\theta )\ast r\\ & =cos(\varphi )cos(\theta )\ast r-sin(\varphi )sin(\theta )\ast r\\ & =x\ast cos(\theta )-y\ast sin(\theta )\\ & \\ y^{{}^{\prime }}& =sin(\varphi +\theta )\ast r\\ & =sin(\varphi )cos(\theta )\ast r+cos(\varphi )sin(\theta )\ast r\\ & =y\ast cos(\theta )+x\ast sin(\theta )\\ & =x\ast sin(\theta )+y\ast cos(\theta )\end{array}$$
所以，旋转后的坐标我们可以使用二维矩阵表示
$$P^{{}^{\prime }}=\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right)=\left(\begin{array}{cc}cos(\theta )& -sin(\theta )\\ sin(\theta )& cos(\theta )\end{array}\right)\left(\begin{array}{c}x\\ y\end{array}\right)=R\ast P$$
其中：
$$R=\left(\begin{array}{cc}cos(\theta )& -sin(\theta )\\ sin(\theta )& cos(\theta )\end{array}\right),\theta 为旋转弧度$$

接下来，考虑围绕任意点$(x_r,y_r)$的旋转。
思路是先把顶点移动$-(x_r,y_r)$，变成围绕原点的旋转，旋转完成后在平移回去
$$\begin{gathered} x^{{}^{\prime }}=(x-x_r)\ast cos(\theta )-(y-y_r)\ast sin(\theta )+x_r \\ {y}^{{}^{\prime }}=(x-x_r)\ast sin(\theta )+(y-y_r)\ast cos(\theta )+y_r \end{gathered}$$
使用矩阵表示为：
$$P^{{}^{\prime }}=\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right)=\left(\begin{array}{cc}cos(\theta )& -sin(\theta )\\ sin(\theta )& cos(\theta )\end{array}\right)\left(\begin{array}{c}x-x_r\\ y-y_r\end{array}\right)+\left(\begin{array}{c}{x}_r\\ y_r\end{array}\right)$$

二维缩放

关于原点的缩放公式可以表示成
$$\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right)=\left(\begin{array}{c}x\ast s_x\\ y\ast s_y\end{array}\right)$$
转换为矩阵表示为：
$$\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right)=\left(\begin{array}{cc}{s}_x& 0\\ 0& s_y\end{array}\right)\left(\begin{array}{c}x\\ y\end{array}\right)$$

关于任意点的缩放和旋转一样，先把顶点移动$-(x_s,y_s)$，变成围绕原点的缩放，缩放完成后在平移回去
$$\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\end{array}\right)=\left(\begin{array}{cc}{s}_x& 0\\ 0& s_y\end{array}\right)\left(\begin{array}{c}x-x_s\\ y-x_s\end{array}\right)+\left(\begin{array}{c}{x}_s\\ y_s\end{array}\right)$$

齐次坐标

通过上面的介绍，我们能看出来：

• 旋转和缩放可以表示成一个二维矩阵和顶点相乘的形式
• 平移操作可以表示成顶点和一个矩阵或者向量相加操作

即
$$P^{{}^{\prime }}=M_1\ast P+M_2$$
对于平移，$M_1$是单位矩阵
对于旋转或者缩放，$M_2$包含基准点或者缩放固定点的平移项

现在考虑一种多个变换操作：

1. 缩放
2. 旋转
3. 平移

我们只能一步一步进行，因为公式中包含矩阵的加法，而如果只有矩阵的乘法的话，多个操作就可以合并成一个操作了，相当于
$$P^{{}^{\prime }}=M_t\ast M_r\ast M_s\ast P$$
这就是齐次坐标引入的原因

我们将2x2的矩阵表达式扩充为3x3矩阵，就可以把二维几何变换的乘法和平移项组合成单一矩阵表示。这时将变换矩阵的第三列用于平移项，而所有的变换公式可表达为矩阵乘法

接下来，我们用齐次坐标重新表示一下二维的平移，旋转和缩放

平移

$$P^{{}^{\prime }}=\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\\ 1\end{array}\right)=\left(\begin{array}{ccc}1& 0& t_x\\ 0& 1& t_y\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}x\\ y\\ 1\end{array}\right)=M_{t}P$$

旋转

$$P^{{}^{\prime }}=\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\\ 1\end{array}\right)=\left(\begin{array}{ccc}cos(\theta )& -sin(\theta )& 0\\ sin(\theta )& cos(\theta )& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}x\\ y\\ 1\end{array}\right)=M_{r}P$$

缩放

$$P^{{}^{\prime }}=\left(\begin{array}{c}{x}^{{}^{\prime }}\\ y^{{}^{\prime }}\\ 1\end{array}\right)=\left(\begin{array}{ccc}{s}_x& 0& 0\\ 0& s_y& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}x\\ y\\ 1\end{array}\right)=M_{s}P$$
$M_t、M_r、M_s$即为三种变换的变换矩阵

逆变换

$M_t、M_r、M_s$的逆变换分别表示为$M_t^{{}^{\prime }}、M_r^{{}^{\prime }}、M_s^{{}^{\prime }}$
$$M_t^{{}^{\prime }}=\left(\begin{array}{ccc}1& 0& -t_x\\ 0& 1& -t_y\\ 0& 0& 1\end{array}\right)$$

$$M_r^{{}^{\prime }}=\left(\begin{array}{ccc}cos(\theta )& sin(\theta )& 0\\ -sin(\theta )& cos(\theta )& 0\\ 0& 0& 1\end{array}\right)$$

$$M_s^{{}^{\prime }}=\left(\begin{array}{ccc}\frac{1}{s_x}& 0& 0\\ 0& \frac{1}{s_y}& 0\\ 0& 0& 1\end{array}\right)$$

复合变换

复合变换有以下几种方式：

• 多个平移变换
• 多个旋转变换
• 多个缩放变换
• 基于给顶点的旋转
• 基于给顶点的缩放
  -上述项的混合

多个平移变换和多个缩放变换很好理解，不过多解释
多个平移变换就是多个平移项相加
多个缩放变换就是多个缩放因子相乘

多个旋转变换

比如两次旋转弧度分别为${\theta }_1$和${\theta }_2$
旋转矩阵可以表示为
$$\begin{array}{rl}{M}_r& =\left(\begin{array}{ccc}cos({\theta }_1)& sin({\theta }_1)& 0\\ -sin({\theta }_1)& cos({\theta }_1)& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{ccc}cos({\theta }_2)& sin({\theta }_2)& 0\\ -sin({\theta }_2)& cos({\theta }_2)& 0\\ 0& 0& 1\end{array}\right)\\ & =\left(\begin{array}{ccc}cos({\theta }_1)cos({\theta }_2)-sin({\theta }_1)sin({\theta }_2)& cos({\theta }_1)sin({\theta }_2)+sin({\theta }_1)cos({\theta }_2)& 0\\ -sin({\theta }_1)cos({\theta }_2)-cos({\theta }_1)sin({\theta }_2)& -sin({\theta }_1)sin({\theta }_2)+cos({\theta }_1)cos({\theta }_2)& 0\\ 0& 0& 1\end{array}\right)\\ & =\left(\begin{array}{ccc}cos({\theta }_1+{\theta }_2)& sin({\theta }_1+{\theta }_2)& 0\\ -sin({\theta }_1+{\theta }_2)& cos({\theta }_1+{\theta }_2)& 0\\ 0& 0& 1\end{array}\right)\end{array}$$
也就是说两次旋转相当于两个旋转弧度相加后进行一次旋转

基于给顶点的旋转和缩放

基于给定点的旋转和缩放其实本质如下：

• 进行平移逆变换，平移量就是基准点的坐标
• 进行缩放或者旋转
• 进行平移变换，平移量是基准点的坐标

即
$$\begin{gathered} P^{{}^{\prime }}=M_t\ast M_r\ast M_t^{{}^{\prime }}\ast P \\ {P}^{{}^{\prime }}=M_t\ast M_s\ast M_t^{{}^{\prime }}\ast P \end{gathered}$$

基于定向的缩放

基于定向的缩放的就是缩放因子不是基于当前x轴和y轴的，而是基于任意方向。

上面图的缩放因子就是基于x轴方向$(1，1)$和y轴方向$(-1，1)$的

怎么表示基于定向的缩放呢，其实也是一种混合变换，变换过程如下：

• 先判断缩放坐标轴与当前坐标系的角度，记为$\theta$，上图为$\frac{\pi }{4}$
• 构造旋转$-\theta$的旋转矩阵，使定向坐标轴与当前坐标轴对齐
• 然后进行缩放
• 然后旋转$\theta$

即
$$P^{{}^{\prime }}=M_r\ast M_s\ast M_r^{{}^{\prime }}\ast P$$

二维坐标系的变换

坐标系变换在游戏引擎或者计算机图形中是经常使用的。

对于一个二维游戏来说，游戏对象树的一个子节点的位置，方向，缩放一般都是相对于父节点的，但是我们在进行顶点坐标计算的时候需要知道相对于世界坐标系的位置。

所以需要进行坐标系的转换

其实二维坐标系的变换知识点上面都已经介绍了，我们看一下图中的例子：

• $xOy$坐标系是世界坐标系
• $x^{{}^{\prime }}{O}^{{}^{\prime }}{y}^{{}^{\prime }}$坐标系是节点$N$的局部坐标系，$N$的位置为$(x_N,y_N)$，旋转弧度为$\theta$
• 节点$n$是节点$N$的子节点，$n$的位置为$(x_n,y_n)$，旋转弧度为${\theta }_1$

对于节点$n$中的一个顶点$v(x,y)$，我们可以求出在$x^{{}^{\prime }}{O}^{{}^{\prime }}{y}^{{}^{\prime }}$的坐标
$$v_N=\left(\begin{array}{c}{x}_N\\ y_N\\ 1\end{array}\right)=\left(\begin{array}{ccc}1& 0& x_n\\ 0& 1& y_n\\ 0& 0& 1\end{array}\right)\left(\begin{array}{ccc}cos({\theta }_1)& -sin({\theta }_1)& 0\\ sin({\theta }_1)& cos({\theta }_1)& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}x\\ y\\ 1\end{array}\right)$$
同理，可以求出$v_N$在$xOy$坐标系的坐标
$$\begin{array}{rl}{v}_1& =\left(\begin{array}{c}{x}_1\\ y_1\\ 1\end{array}\right)=\left(\begin{array}{ccc}1& 0& x_N\\ 0& 1& y_N\\ 0& 0& 1\end{array}\right)\left(\begin{array}{ccc}cos(\theta )& -sin(\theta )& 0\\ sin(\theta )& cos(\theta )& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}{x}_N\\ y_N\\ 1\end{array}\right)\\ & \\ & =\left(\begin{array}{ccc}1& 0& x_N\\ 0& 1& y_N\\ 0& 0& 1\end{array}\right)\left(\begin{array}{ccc}cos(\theta )& -sin(\theta )& 0\\ sin(\theta )& cos(\theta )& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{ccc}1& 0& x_n\\ 0& 1& y_n\\ 0& 0& 1\end{array}\right)\left(\begin{array}{ccc}cos({\theta }_1)& -sin({\theta }_1)& 0\\ sin({\theta }_1)& cos({\theta }_1)& 0\\ 0& 0& 1\end{array}\right)\left(\begin{array}{c}x\\ y\\ 1\end{array}\right)\end{array}$$

所以，我们可以总结出，子节点到父节点的坐标系转换矩阵就是
子节点的平移矩阵\*子节点的旋转矩阵\*子节点的缩放矩阵

当然，父节点到子节点的坐标系转换矩阵是上述矩阵的逆矩阵