0. まとめ

変換行列を

\begin{pmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1 \\
\end{pmatrix}

=

\begin{pmatrix}
1 & 0 & t_x \\
0 & 1 & t_y \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
s_x & 0 & 0 \\
0 & s_y & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

と分解すると、各変換要素の値は

\begin{align}

\begin{pmatrix}
t_x \\
t_y \\
\end{pmatrix}

&=

\begin{pmatrix}
e \\
f \\
\end{pmatrix}

\\

\begin{pmatrix}
a_x \\
a_y \\
\end{pmatrix}

&=

\begin{pmatrix}
\arctan \left( \dfrac cd \right) \\
\arctan \left( \dfrac ba \right) \\
\end{pmatrix}

\\

\begin{pmatrix}
s_x \\
s_y \\
\end{pmatrix}

&=

\begin{pmatrix}
\sqrt{ a^2 + b^2 } \\
\sqrt{ c^2 + d^2 } \\
\end{pmatrix}

\end{align}

になります。

1. 平行移動

行列を分割して乗算すると

\begin{align}

\left(
\begin{array}{cc|c}
a & c & e \\
b & d & f \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

&=

\left(
\begin{array}{cc|c}
1 & 0 & t_x \\
0 & 1 & t_y \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\left(
\begin{array}{cc|c}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\left(
\begin{array}{cc|c}
s_x & 0 & 0 \\
0 & s_y & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\\

&=

\begin{pmatrix}
I & T \\
O & I \\
\end{pmatrix}

\begin{pmatrix}
A & O \\
O & I \\
\end{pmatrix}

\begin{pmatrix}
S & O \\
O & I \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
A S & T \\
O & I \\
\end{pmatrix}

\end{align}

となり、

T

=

\begin{pmatrix}
t_x \\
t_y \\
\end{pmatrix}

=

\begin{pmatrix}
e \\
f \\
\end{pmatrix}

になることが分かります。

2. せん断/回転

平行移動を除く変形は

\begin{align}

A S

&=

\begin{pmatrix}
\cos(a_y) & \sin(a_x) \\
\sin(a_y) & \cos(a_x) \\
\end{pmatrix}

\begin{pmatrix}
s_x & 0 \\
0 & s_y \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
s_x \cos(a_y) & s_y \sin(a_x) \\
s_x \sin(a_y) & s_y \cos(a_x) \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
a & c \\
b & d \\
\end{pmatrix}

\end{align}

となり、$\tan\theta = \dfrac{\sin\theta}{\cos\theta}$ より

\begin{align}

\begin{pmatrix}
\dfrac cd \\
\dfrac ba \\
\end{pmatrix}

&=

\begin{pmatrix}
\dfrac{\sin(a_x)}{\cos(a_x)} \\
\dfrac{\sin(a_y)}{\cos(a_y)} \\
\end{pmatrix}

=

\begin{pmatrix}
\tan(a_x) \\
\tan(a_y) \\
\end{pmatrix}

\\

\begin{pmatrix}
a_x \\
a_y \\
\end{pmatrix}

&=

\begin{pmatrix}
\arctan \left( \dfrac cd \right) \\
\arctan \left( \dfrac ba \right) \\
\end{pmatrix}

\end{align}

になります。

3. 拡大縮小

$\cos^2\theta + \sin^2\theta = 1$ より

\begin{pmatrix}
\sqrt{ a^2 + b^2 } \\
\sqrt{ c^2 + d^2 } \\
\end{pmatrix}

=

\begin{pmatrix}
s_x \sqrt{ \cos^2(a_y) + \sin^2(a_y) } \\
s_y \sqrt{ \sin^2(a_x) + \cos^2(a_x) } \\
\end{pmatrix}

=

\begin{pmatrix}
s_x \\
s_y \\
\end{pmatrix}

になります。

4. その他

4.1. 回転をせん断を用いて表す

回転とせん断の変換行列は

\begin{align}

\left(
\begin{array}{cc|c}
\cos\theta & - \sin\theta & 0 \\
\sin\theta & \cos\theta & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

&=

\left(
\begin{array}{cc|c}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\\

&=

\left(
\begin{array}{cc|c}
\cos(a_y) & - \sin(- a_x) & 0 \\
\sin(a_y) & \cos(- a_x) & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\end{align}

となり、

\begin{pmatrix}
a_x \\
a_y \\
\end{pmatrix}

=

\begin{pmatrix}
- \theta \\
\theta \\
\end{pmatrix}

になります。

4.2. せん断と回転を分解する

せん断の変換行列を

\left(
\begin{array}{cc|c}
\cos(a_y) & \sin(a_x) & 0 \\
\sin(a_y) & \cos(a_x) & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

=

\left(
\begin{array}{cc|c}
\cos\theta & - \sin\theta & 0 \\
\sin\theta & \cos\theta & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

\left(
\begin{array}{cc|c}
\cos(a_y') & \sin(a_x') & 0 \\
\sin(a_y') & \cos(a_x') & 0 \\
\hline
0 & 0 & 1 \\
\end{array} 
\right)

と分解すると

\begin{align}

\begin{pmatrix}
\cos(a_y) & \sin(a_x) \\
\sin(a_y) & \cos(a_x) \\
\end{pmatrix}

&=

\begin{pmatrix}
\cos\theta & - \sin\theta \\
\sin\theta & \cos\theta \\
\end{pmatrix}

\begin{pmatrix}
\cos(a_y') & \sin(a_x') \\
\sin(a_y') & \cos(a_x') \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
\cos\theta \cos(a_y') - \sin\theta \sin(a_y') & \cos\theta \sin(a_x') - \sin\theta \cos(a_x') \\
\sin\theta \cos(a_y') + \cos\theta \sin(a_y') & \sin\theta \sin(a_x') + \cos\theta \cos(a_x') \\
\end{pmatrix}

\end{align}

が成り立ちます。

三角関数の加法定理

\begin{align}
\sin(\alpha + \beta) &= \sin\alpha \cos\beta + \cos\alpha \sin\beta \\
\sin(\alpha - \beta) &= \sin\alpha \cos\beta - \cos\alpha \sin\beta \\
\cos(\alpha + \beta) &= \cos\alpha \cos\beta - \sin\alpha \sin\beta \\
\cos(\alpha - \beta) &= \cos\alpha \cos\beta + \sin\alpha \sin\beta \\
\end{align}

より

\begin{align}

\begin{pmatrix}
\cos(a_y) & \sin(a_x) \\
\sin(a_y) & \cos(a_x) \\
\end{pmatrix}

&=

\begin{pmatrix}
\cos\theta \cos(a_y') - \sin\theta \sin(a_y') & \cos\theta \sin(a_x') - \sin\theta \cos(a_x') \\
\sin\theta \cos(a_y') + \cos\theta \sin(a_y') & \sin\theta \sin(a_x') + \cos\theta \cos(a_x') \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
\cos(\theta + a_y') & - \sin(\theta - a_x') \\
\sin(\theta + a_y') & \cos(\theta - a_x') \\
\end{pmatrix}

\\

&=

\begin{pmatrix}
\cos(a_y' + \theta) & \sin(a_x' - \theta) \\
\sin(a_y' + \theta) & \cos(a_x' - \theta) \\
\end{pmatrix}

\end{align}

となり、

\begin{pmatrix}
a_x \\
a_y \\
\end{pmatrix}

=

\begin{pmatrix}
a_x' - \theta \\
a_y' + \theta \\
\end{pmatrix}

になります。

4.3. せん断を tan を用いて表す

$\cos\theta = 0$ となる角度 $\theta$ を除いて、せん断の変換行列は

{\begin{pmatrix}
\cos(a_y') & \sin(a_x') & 0 \\
\sin(a_y') & \cos(a_x') & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

=

\begin{pmatrix}
1 & \tan(a_x') & 0 \\
\tan(a_y') & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
\cos(a_y') & 0 & 0 \\
0 & \cos(a_x') & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
}

になります。

参考「[CSS/JavaScript] アフィン変換の skew の挙動は実装により異なる - Qiita」