矩陣運算(平移、縮放、旋轉)


(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) translate 方法參數的矩陣表示法 translate 方法效果的圖示 將圖像 tx 像素向右移動,將 ty 像素向下移動。
縮放 scale(sx, sy) scale 方法參數的矩陣表示法 scale 方法效果的圖示 將每個像素的位置乘以 x 軸的 sx 和 y 軸的 sy,從而調整圖像的大小。
旋轉 rotate(q) rotate 方法屬性的矩陣表示法 rotate 方法效果的圖示 將圖像旋轉一個以弧度為單位的角度 q。
傾斜或剪切 無;必須設置屬性 b 和 c skew 函數屬性的矩陣表示法 skew 函數效果的圖示 以平行於 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM