(x',y',z')表示新的位置,
(x,y,z)表示當前位置,
(dx,dy,dz)平移的量。
加法2D平移
\[\begin{bmatrix} x' \\ y' \\ \end{bmatrix} = \begin{bmatrix} x \\ y \\ \end{bmatrix} + \begin{bmatrix} dx \\ dy \\ \end{bmatrix} \]
加法3D平移
\[\begin{bmatrix} x' \\ y' \\ z' \\ \end{bmatrix} = \begin{bmatrix} x \\ y \\ z \\ \end{bmatrix} + \begin{bmatrix} dx \\ dy \\ dz \\ \end{bmatrix} \]
乘法2D平移
\[\begin{bmatrix} x' \\ y' \\ 1 \\ \end{bmatrix} = \begin{bmatrix} 1 & 0 & dx \\ 0 & 1 & dy \\ 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \\ \end{bmatrix} = \begin{bmatrix} 1(x) + 0(y) + dx(1) \\ 0(x) + 1(y) + dy(1) \\ 0(x) + 0(y) + 1(1) \\ \end{bmatrix} \]
乘法3D平移
\[\begin{bmatrix} x' \\ y' \\ z' \\ 1 \\ \end{bmatrix} = \begin{bmatrix} 1 & 0 & 0 & dx \\ 0 & 1 & 0 & dy \\ 0 & 0 & 1 & dz \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \\ \end{bmatrix} = \begin{bmatrix} 1(x) + 0(y) +0(z) + dx(1) \\ 0(x) + 1(y) +0(z) + dy(1) \\ 0(x) + 0(y) +1(z) + dz(1) \\ 0(x) + 0(y) +0(z) + 1(1) \\ \end{bmatrix} \]
(x',y',z')表示一個點經過縮放后的新位置,
(x,y,z)表示未縮放前的原始位置,
Sx、Sy、Sz分別表示在x軸、y軸和z軸方向上的縮放因子。
注意:計算多個點的縮放,需要將每個點位置分別代入公式計算。
2D縮放
\[\begin{bmatrix} x' \\ y' \\ 1 \\ \end{bmatrix} = \begin{bmatrix} Sx & 0 & 0 \\ 0 & Sy & 0 \\ 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \\ \end{bmatrix} = \begin{bmatrix} Sx(x) + 0(y) + 0(1) \\ 0(x) + Sy(y) + 0(1) \\ 0(x) + 0(y) + 1(1) \\ \end{bmatrix} \]
3D縮放
\[\begin{bmatrix} x' \\ y' \\ z' \\ 1 \\ \end{bmatrix} = \begin{bmatrix} Sx & 0 & 0 & 0 \\ 0 & Sy & 0 & 0 \\ 0 & 0 & Sz & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \\ \end{bmatrix} = \begin{bmatrix} Sx(x) + 0(y) +0(z) + 0(1) \\ 0(x) + Sy(y) +0(z) + 0(1) \\ 0(x) + 0(y) +Sz(z) + 0(1) \\ 0(x) + 0(y) +0(z) + 1(1) \\ \end{bmatrix} \]
2D旋轉
(x',y',z')表示一個點經過旋轉后的新位置,
(x,y,z)表示未旋轉前的原始位置,
\(\theta\)為旋轉角度(編程中以弧度為單位)
注意:計算多個點的旋轉,需要將每個點位置分別代入公式計算。
\[\begin{bmatrix} x' \\ y' \\ 1 \\ \end{bmatrix} = \begin{bmatrix} cos \theta & -sin \theta & 0 \\ sin \theta & cos \theta & 0 \\ 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \\ \end{bmatrix} \]
繞Z軸3D旋轉
\[\begin{bmatrix} x' \\ y' \\ z' \\ 1 \\ \end{bmatrix} = \begin{bmatrix} cos \theta & -sin \theta & 0 & 0 \\ sin \theta & cos \theta & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \\ \end{bmatrix} \]
繞X軸3D旋轉
\[\begin{bmatrix} x' \\ y' \\ z' \\ 1 \\ \end{bmatrix} = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & cos \theta & -sin \theta & 0 \\ 0 & sin \theta & cos \theta & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \\ \end{bmatrix} \]
繞Y軸3D旋轉
\[\begin{bmatrix} x' \\ y' \\ z' \\ 1 \\ \end{bmatrix} = \begin{bmatrix} cos \theta & 0 & sin \theta & 0 \\ 0 & 1 & 0 & 0 \\ -sin \theta & 0 & cos \theta & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \\ \end{bmatrix} \]
轉換 | 方法 | 矩陣值 | 顯示結果 | 說明 |
---|---|---|---|---|
平移(置換) | translate(tx, ty) | ![]() |
![]() |
將圖像 tx 像素向右移動,將 ty 像素向下移動。 |
縮放 | scale(sx, sy) | ![]() |
![]() |
將每個像素的位置乘以 x 軸的 sx 和 y 軸的 sy,從而調整圖像的大小。 |
旋轉 | rotate(q) | ![]() |
![]() |
將圖像旋轉一個以弧度為單位的角度 q。 |
傾斜或剪切 | 無;必須設置屬性 b 和 c | ![]() |
![]() |
以平行於 x 軸或 y 軸的方向逐漸滑動圖像。Matrix 對象的 b 屬性表示斜角沿 y 軸的正切;Matrix 對象的 c 屬性表示斜角沿 x 軸的正切。 |
四元數實現旋轉
https://zhuanlan.zhihu.com/p/27471300?group_id=862339882582945792
https://www.cnblogs.com/hjlweilong/p/6018213.html
https://blog.csdn.net/linyijiong/article/details/79777399
https://www.cnblogs.com/jins-note/p/9512753.html