Lecture 3 Transformation
1. 变换
1.1 Scale
1.1.1 等比缩放
- 二维图片的长宽等比例缩放为原来的
s
\large{s}
s，其图示为：
其数学表达式可表示为
x ′ = s x y ′ = s y {\Large \begin{align*} &x^{\prime } = sx\\ &y^{\prime } = sy \end{align*} } x′=sxy′=sy
其使用矩阵变换表达为
[ x ′ y ′ ] = [ s 0 0 s ] [ x y ] {\Large \begin{bmatrix} x^{\prime } \\ y^{\prime } \end{bmatrix} = \begin{bmatrix} s&0\\ 0&s \end{bmatrix}\begin{bmatrix} x \\ y \end{bmatrix}} ⎣ ⎡x′y′⎦ ⎤=⎣ ⎡s00s⎦ ⎤⎣ ⎡xy⎦ ⎤
1.1.2 非等比缩放
- 二维图片的长款分别进行变换，如下图，
x
\large{x}
x变为原来的
s
x
\large{s_{x} }
sx，而
y
\large{y}
y变为原来的
s
y
\large{s_{y} }
sy
其矩阵形式表达式为
[ x ′ y ′ ] = [ s x 0 0 s y ] [ x y ] {\Large \begin{bmatrix} x^{\prime } \\ y^{\prime } \end{bmatrix} = \begin{bmatrix} s_{x}&0\\ 0&s_{y} \end{bmatrix}\begin{bmatrix} x \\ y \end{bmatrix}} ⎣ ⎡x′y′⎦ ⎤=⎣ ⎡sx00sy⎦ ⎤⎣ ⎡xy⎦ ⎤
1.2 轴对称变换
- 图片关于某个轴的对称变换，如下图，关于
y
\large{y}
y轴的对称变换
其数学表达式可表示为
x ′ = − x y ′ = y {\Large \begin{align*} &x^{\prime } = -x\\ &y^{\prime } = y \end{align*} } x′=−xy′=y
其矩阵变换可表示为
[ x ′ y ′ ] = [ − 1 0 0 1 ] [ x y ] {\Large \begin{bmatrix} x^{\prime } \\ y^{\prime } \end{bmatrix} = \begin{bmatrix} -1&0\\ 0&1 \end{bmatrix}\begin{bmatrix} x \\ y \end{bmatrix}} ⎣ ⎡x′y′⎦ ⎤=⎣ ⎡−1001⎦ ⎤⎣ ⎡xy⎦ ⎤
1.3 剪切(Shear)变换
- 图片的高度不变，拉着一个角进行拉伸，如下图所示，图片的左上角的横坐标由
0
0
0变为了
a
a
a，但是其纵坐标不变。
左边的边上任意一点的水平方向移动的距离通过相似三角形可以知道
Δ x a = y 1 ⇒ Δ x = a y {\Large \frac{\Delta x}{a} = \frac{y}{1} } \Rightarrow {\Large \Delta x = ay} aΔx=1y⇒Δx=ay
所以横坐标最终结果也可以算出来
x ′ = x + Δ x = x + a y y ′ = y {\Large \begin{align*} &x^{\prime } = x + \Delta x = x + ay\\ &y^{\prime} = y \end{align*} } x′=x+Δx=x+ayy′=y
因此，该变换的矩阵表达为
[ x ′ y ′ ] = [ 1 a 0 1 ] [ x y ] {\Large \begin{bmatrix} x^{\prime } \\ y^{\prime } \end{bmatrix} = \begin{bmatrix} 1&a\\ 0&1 \end{bmatrix}\begin{bmatrix} x \\ y \end{bmatrix}} ⎣ ⎡x′y′⎦ ⎤=⎣ ⎡10a1⎦ ⎤⎣ ⎡xy⎦ ⎤
1.4 旋转变换（默认绕着原点逆时针旋转）
- 在未说明的情况下，图片绕着原点逆时针旋转
θ
\theta
θ度，示意图如下：
欲求出旋转变换的变换矩阵，可由两个特殊点来进行计算，我们可以先有以下假设
[ x ′ y ′ ] = [ A B C D ] [ x y ] {\Large \begin{bmatrix} x^{\prime } \\ y^{\prime } \end{bmatrix} = \begin{bmatrix} A&B\\ C&D \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix}} ⎣ ⎡x′y′⎦ ⎤=⎣ ⎡ACBD⎦ ⎤⎣ ⎡xy⎦ ⎤
其中 [ A B C D ] \begin{bmatrix} A&B\\ C&D \end{bmatrix} [ACBD]即为所求的旋转变换矩阵。由图中可以观察到两个特殊点 ( 1 , 0 ) \left ( 1,0 \right ) (1,0)和 ( 0 , 1 ) \left ( 0,1 \right ) (0,1)（假设边长为1），这两个点经过旋转 θ \theta θ度后其坐标分别变为 ( cos θ , sin θ ) \left (\cos \theta,\sin \theta \right ) (cosθ,sinθ)和 ( − sin θ , cos θ ) \left (-\sin \theta,\cos \theta \right ) (−sinθ,cosθ)，将其分别带入到上述假设的公式中可以得出
[ cos θ sin θ ] = [ A B C D ] [ 1 0 ] ⇒ { cos θ = A sin θ = C [ − sin θ cos θ ] = [ A B C D ] [ 0 1 ] ⇒ { cos θ = D − sin θ = B {\Large \begin{align*} &\begin{bmatrix} \cos \theta \\ \sin \theta \end{bmatrix} = \begin{bmatrix} A&B\\ C&D \end{bmatrix} \begin{bmatrix} 1 \\ 0 \end{bmatrix} \Rightarrow \left\{\begin{matrix} \cos \theta = A\\ \sin \theta = C \end{matrix}\right.\\ & \begin{bmatrix} -\sin \theta \\ \cos \theta \end{bmatrix} = \begin{bmatrix} A&B\\ C&D \end{bmatrix} \begin{bmatrix} 0 \\ 1 \end{bmatrix} \Rightarrow \left\{\begin{matrix} \cos \theta = D \\ -\sin \theta = B \end{matrix}\right. \end{align*} } ⎣ ⎡cosθsinθ⎦ ⎤=⎣ ⎡ACBD⎦ ⎤⎣ ⎡10⎦ ⎤⇒⎩ ⎨ ⎧cosθ=Asinθ=C⎣ ⎡−sinθcosθ⎦ ⎤=⎣ ⎡ACBD⎦ ⎤⎣ ⎡01⎦ ⎤⇒⎩ ⎨ ⎧cosθ=D−sinθ=B
到此，可以得出二维旋转变换的矩阵表达式
R 0 = [ cos θ − sin θ sin θ cos θ ] {\Large R_{0} = \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \end{bmatrix}} R0=⎣ ⎡cosθsinθ−sinθcosθ⎦ ⎤
1.5 线性变换小结
- 以上变换都可以看作在原有的坐标（列向量）左乘一个变换矩阵
[
a
b
c
d
]
\begin{bmatrix} a& b\\ c& d \end{bmatrix}
[acbd]即可得到最终的变换后的坐标。其实都可以用以下矩阵变换公式表达
{ x ′ = a x + b y y ′ = c x + d y ⇒ [ x ′ y ′ ] = [ a b c d ] [ x y ] ⇒ X ′ = M x {\large \left\{\begin{matrix} x^{\prime } = ax + by \\ y^{\prime } = cx + dy \end{matrix}\right. \Rightarrow \begin{bmatrix} x^{\prime }\\ y^{\prime } \end{bmatrix} = \begin{bmatrix} a& b\\ c& d \end{bmatrix}\begin{bmatrix} x\\ y \end{bmatrix} \Rightarrow X^{\prime } = Mx} {x′=ax+byy′=cx+dy⇒[x′y′]=[acbd][xy]⇒X′=Mx
1.6 平移变换
- 平移变换是一种相比较于线性变换比较特殊的变换，它不是通过左乘矩阵完成变换，平移变换即不是线性变换，而是通过矩阵的加减来完成变换，其图示如下
平移变换数学表达式可表示为
{ x ′ = x + t x y ′ = y + t y {\Large \left\{\begin{matrix} x^{\prime } = x + t_{x} \\ y^{\prime } = y + t_{y} \end{matrix}\right.} ⎩ ⎨ ⎧x′=x+txy′=y+ty
加上线性变换之后进行平移的矩阵表达式为
[ x ′ y ′ ] = [ a b c d ] [ x y ] + [ t x t y ] {\Large \begin{bmatrix} x^{\prime } \\ y^{\prime } \end{bmatrix} = \begin{bmatrix} a& b\\ c& d \end{bmatrix}\begin{bmatrix} x \\ y \end{bmatrix}+\begin{bmatrix} t_{x} \\ t_{y} \end{bmatrix}} ⎣ ⎡x′y′⎦ ⎤=⎣ ⎡acbd⎦ ⎤⎣ ⎡xy⎦ ⎤+⎣ ⎡txty⎦ ⎤
平移变换不是一个线性变换，所以无法跟线性变换有一个统一的左乘一个变换矩阵的方式来表达，因为我们引入齐次坐标来解决这个问题。
2. 齐次坐标表达二维变换
2.1 基本概念
- 由前面讲解可以看出，平移变换和线性变换的矩阵表达式并不是统一的形式，因此我们通过对二维坐标增加一个维度来统一化表达平移变换和线性变换，对于二维点坐标来说可以表达为
(
x
,
y
,
1
)
T
\left ( x,~y, ~{\color{Red} 1} \right ) ^{T}
(x, y, 1)T，而二维向量可表达为
(
x
,
y
,
0
)
T
\left ( x,~y, ~{\color{Red} 0} \right ) ^{T}
(x, y, 0)T，因为向量具有平移不变性，即向量经过平移之后，方向仍然不变，其向量坐标表达的仍然是它的方向信息，因此在最后一个维度为0，用齐次坐标来表达平移可表达为
[ x ′ y ′ w ′ ] = [ 1 0 t x 0 1 t y 0 0 1 ] [ x y 1 ] = [ x + t x y + t y 1 ] {\Large \begin{bmatrix} x^{\prime } \\ y^{\prime } \\ w^{\prime } \end{bmatrix} = \begin{bmatrix} 1& 0 & t_{x} \\ 0& 1 & t_{y} \\ 0& 0 & 1 \end{bmatrix}\begin{bmatrix} x \\ y \\ 1 \end{bmatrix} = \begin{bmatrix} x + t_{x}\\ y + t_{y}\\ 1 \end{bmatrix}} ⎣ ⎡x′y′w′⎦ ⎤=⎣ ⎡100010txty1⎦ ⎤⎣ ⎡xy1⎦ ⎤=⎣ ⎡x+txy+ty1⎦ ⎤
因此，由以上平移变换可知，当一个二维点进行平移时，通过齐次坐标变换之后即为平移之后点的坐标，但如果是一个向量进行平移时，因为第三个维度的值为0，因此在通过齐次坐标变换之后，仍然是原向量。 - 在规定了二维点和向量的坐标之后，我们很容易得知以下结论：
- 向量 + 向量 = 向量
- 点 - 点 = 向量
- 点 + 向量 = 向量
- 点 + 点 = 中点
对于最后一条，假设一个二维坐标点为 ( x , y , w ) T \left ( x,~y,~w \right ) ^{T} (x, y, w)T其中 w ≠ 0 w\ne0 w=0，其坐标同时除以 w w w后为 ( x w , y w , 1 ) T \left ( \frac{x}{w} ,~\frac{y}{w},~1 \right ) ^{T} (wx, wy, 1)T，结果仍然是一个二维点，那么当 w = 2 w = 2 w=2时，它表达的就是两个点的中点。
2.2 齐次坐标小结
- 线性变换和平移变换有两种表达方式
[ x ′ y ′ ] = [ a b c d ] [ x y ] + [ t x t y ] [ x ′ y ′ 1 ] = [ a b t x c d t y 0 0 1 ] [ x y 1 ] {\Large \begin{align*} &\begin{bmatrix} x^{\prime }\\ y^{\prime } \end{bmatrix} = \begin{bmatrix} a& b\\ c& d \end{bmatrix}\begin{bmatrix} x\\ y \end{bmatrix}+\begin{bmatrix} t_{x}\\ t_{y} \end{bmatrix} \\ & \begin{bmatrix} x^{\prime } \\ y^{\prime } \\ 1 \end{bmatrix} = \begin{bmatrix} a& b & t_{x} \\ c& d & t_{y} \\ 0& 0 & 1 \end{bmatrix}\begin{bmatrix} x \\ y \\ 1 \end{bmatrix} \end{align*}} ⎣ ⎡x′y′⎦ ⎤=⎣ ⎡acbd⎦ ⎤⎣ ⎡xy⎦ ⎤+⎣ ⎡txty⎦ ⎤⎣ ⎡x′y′1⎦ ⎤=⎣ ⎡ac0bd0txty1⎦ ⎤⎣ ⎡xy1⎦ ⎤ - 同时，我们可以通过齐次坐标分别表达缩放，旋转和平移的变换矩阵
- 缩放变换
S ( s x , s y ) = [ s x 0 0 0 s y 0 0 0 1 ] {\Large S\left ( s_{x} ,s_{y} \right ) = \begin{bmatrix} s_{x}& 0 & 0\\ 0& s_{y} & 0\\ 0& 0 & 1 \end{bmatrix}} S(sx,sy)=⎣ ⎡sx000sy0001⎦ ⎤ - 旋转变换
R ( α ) = [ cos α − sin α 0 sin α cos α 0 0 0 1 ] {\Large R\left ( \alpha \right ) = \begin{bmatrix} \cos \alpha & -\sin \alpha & 0\\ \sin \alpha& \cos \alpha & 0\\ 0& 0 & 1 \end{bmatrix}} R(α)=⎣ ⎡cosαsinα0−sinαcosα0001⎦ ⎤ - 平移变换
T ( t x , t y ) = [ 1 0 t x 0 1 t y 0 0 1 ] {\Large T\left ( t_{x} , t_{y} \right ) = \begin{bmatrix} 1 & 0 & t_{x}\\ 0& 1 & t_{y}\\ 0& 0 & 1 \end{bmatrix}} T(tx,ty)=⎣ ⎡100010txty1⎦ ⎤ - 注：可见每一个变换矩阵的最后一行都为 ( 0 , 0 , 1 ) \left ( 0,0,1 \right ) (0,0,1)，因此，在实际代码编写过程中，我们只需要存储变换矩阵的前两行就可以，以此减少存储空间。
- 缩放变换
- 逆变换： 如果矩阵
M
M
M表示一个变换，那么
M
−
1
M^{-1}
M−1则表达该变换的逆变换，即从目标状态变换回原状态的矩阵。示意图如下
3. 组合变换
3.1 基本概念
- 组合变换即通过组合平移，旋转，缩放变换来进行一些复杂变换，也可以理解为将复杂变换分解为一系列的基本变换。一个简单的旋转和平移的示意图如下
上图是两组进行不同顺序平移和旋转变换的复杂变换示意图，在前面我们已经提到，默认情况下，旋转变换是绕原点逆时针进行旋转，因此，假设我们需要的目标状态为第二行的最终结果，那么很显然，先旋转再平移可以达到我们想要的变换结果，但如果先进行平移在进行旋转，因为旋转是绕原点逆时针进行就会出现第一行那种状态，显然不是我们想要的目标状态。因此，我们可以得出以下结论
R 45 ⋅ T ( 1 , 0 ) ≠ T ( 1 , 0 ) ⋅ R 45 {\Large R_{45} \cdot T_{\left ( 1,0 \right ) }\ne T_{\left ( 1,0 \right ) } \cdot R_{45}} R45⋅T(1,0)=T(1,0)⋅R45
也即，变换之间是存在一定的顺序关系的，不能随意的调换变换矩阵的左乘顺序，上边示例的正确变换矩阵表达为
T ( 1 , 0 ) ⋅ R 45 [ x y 1 ] = [ 1 0 1 0 1 0 0 0 1 ] [ cos 4 5 ∘ − sin 4 5 ∘ 0 sin 4 5 ∘ cos 4 5 ∘ 0 0 0 1 ] [ x y 1 ] T_{\left ( 1,0 \right ) } \cdot R_{45}\begin{bmatrix} x\\ y\\ 1 \end{bmatrix}= \begin{bmatrix} 1& 0 & 1\\ 0& 1 & 0\\ 0& 0 &1 \end{bmatrix}\begin{bmatrix} \cos 45^{\circ } & -\sin 45^{\circ } & 0\\ \sin 45^{\circ }& \cos 45^{\circ } & 0\\ 0& 0 &1 \end{bmatrix}\begin{bmatrix} x\\ y\\ 1 \end{bmatrix} T(1,0)⋅R45⎣ ⎡xy1⎦ ⎤=⎣ ⎡100010101⎦ ⎤⎣ ⎡cos45∘sin45∘0−sin45∘cos45∘0001⎦ ⎤⎣ ⎡xy1⎦ ⎤ - 组合变换的本质其实就是一系列基础变换矩阵按顺序左乘实现的，因此，假设我们有一系列变换
A
1
,
A
2
,
A
3
,
⋯
\mathbf{A_{1} ,A_{2} ,A_{3} ,\cdots}
A1,A2,A3,⋯，因此该变换的最终结果为
A n ( … A 2 ( A 1 ( x ) ) ) = A n … A 2 ⋅ A 1 ⋅ [ x y 1 ] A_{n} \left ( \dots A_{2}\left ( A_{1}\left ( x \right ) \right ) \right ) = \mathbf{A_{n}\dots A_{2}\cdot A_{1}} \cdot \begin{bmatrix} x\\ y\\ 1 \end{bmatrix} An(…A2(A1(x)))=An…A2⋅A1⋅⎣ ⎡xy1⎦ ⎤
对于上边变换式子我们可以有两种理解方式：- 对于原始状态按照 A 1 , A 2 , A 3 , ⋯ \mathbf{A_{1} ,A_{2} ,A_{3} ,\cdots} A1,A2,A3,⋯变换顺序依次进行变换（依次左乘变换矩阵）
- 我们可以将 A n … A 2 ⋅ A 1 \mathbf{A_{n}\dots A_{2}\cdot A_{1}} An…A2⋅A1看作一个整体，将其作为一个整体的变换结果（矩阵的结合律），然后原始状态应用该变换结果。
3.2 组合变换示例
- 对于以下一个从左最初状态变换到最右最终状态的变换，我们可以将其拆解为如下过程
也即以左下点为例，整体变换，其变换表达式为 T ( c ) ⋅ R ( α ) ⋅ T ( − c ) \mathbf{T\left ( c \right ) \cdot R\left ( \alpha \right ) \cdot T\left ( -c \right )} T(c)⋅R(α)⋅T(−c)，变换顺序是从左到右。步骤说明如下- 先将左下点移动到原点
- 然后将其旋转相应的角度
- 最后在将其平移至原来的位置
至此本节课结束
410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
