概要
状態:-
閲覧数:1,017
投稿日:2014-05-04
更新日:2014-10-11
変換行列を合成
・このメソッドを呼び出すと現在の変換行列が変更される
・既に描画した内容に影響を与えるのではなく、これから描画する内容に影響を与える
・具体的には、現在の変換マトリックスと掛け合わせて、描画する図形の変換行列を、変換マトリックスで直接変更する
変換マトリックスとは？
・図形の座標を変換する計算式のこと
・先に変換マトリックスを指定してから図形を指定すると、 後に続く図形の座標に変換マトリックスが適用されて図形が変形される
変換行列の変更が描画に及ぼす具体的影響は？
・数学のアフィン変換の法則による
・但し、アフィン変換を理解していなくても、scaleメソッド、rotateメソッド、translateメソッドを使って描画する図形を拡大・縮小・回転・平行移動することは可能(これらの組み合わせでtransformメソッドと同等機能を実装することは可能)
構文
第1引数a
・伸縮x
・水平方向の伸縮倍数
・変形しない場合は1
第2引数b
・傾斜y
・垂直方向の傾斜率
・変形しない場合は0
第3引数c
・傾斜x
・水平方向の傾斜率
・変形しない場合は0
第4引数d
・伸縮y
・垂直方向の伸縮倍数
・変形しない場合は1
第5引数e
・移動x
・水平方向の移動距離
・変形しない場合は0
第6引数f
・移動y
・垂直方向の移動距離
・変形しない場合は0
・各パラメーターは下記の変換行列上の位置
戻り値
・なし
・このメソッドを呼び出すと現在の変換行列が変更される
・既に描画した内容に影響を与えるのではなく、これから描画する内容に影響を与える
・具体的には、現在の変換マトリックスと掛け合わせて、描画する図形の変換行列を、変換マトリックスで直接変更する
変換マトリックスとは？
・図形の座標を変換する計算式のこと
・先に変換マトリックスを指定してから図形を指定すると、 後に続く図形の座標に変換マトリックスが適用されて図形が変形される
変換行列の変更が描画に及ぼす具体的影響は？
・数学のアフィン変換の法則による
・但し、アフィン変換を理解していなくても、scaleメソッド、rotateメソッド、translateメソッドを使って描画する図形を拡大・縮小・回転・平行移動することは可能(これらの組み合わせでtransformメソッドと同等機能を実装することは可能)
構文
CanvasRenderingContext2Dオブジェクト.transform(a, b, c, d, e, f);
引数
第1引数a
・伸縮x
・水平方向の伸縮倍数
・変形しない場合は1
第2引数b
・傾斜y
・垂直方向の傾斜率
・変形しない場合は0
第3引数c
・傾斜x
・水平方向の傾斜率
・変形しない場合は0
第4引数d
・伸縮y
・垂直方向の伸縮倍数
・変形しない場合は1
第5引数e
・移動x
・水平方向の移動距離
・変形しない場合は0
第6引数f
・移動y
・垂直方向の移動距離
・変形しない場合は0
・各パラメーターは下記の変換行列上の位置
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
・なし
描画内容
平行移動
X軸方向にdx、Y軸方向にdy平行移動させる変換行列
・これはtranslate(dx, dy)の効果と同じ
| 1 | 0 | dx |
| 0 | 1 | dy |
| 0 | 0 | 1 |
Ｙ軸反転
Ｙ軸に対する鏡像変換（ミラー）
| -1 | 0 | 0 |
| 0 | 1 | 0 |
| 0 | 0 | 1 |
Ｘ'= -x
Ｙ'= y
へ変換されることになる
計算式
・(x×-1)＋(x×0)＋(x×0)＝-x
・(y×0)＋(y×1)＋(y×0)＝y
拡大縮小
X軸方向にdx倍、Y軸方向にdy倍する変換行列
・これはscale(dx, dy)の効果と同じ
| dx | 0 | 0 |
| 0 | dy | 0 |
| 0 | 0 | 1 |
回転
原点を中心にθラジアン回転する変換行列
・これはrotate(θ)の効果と同じ
| cosθ | sinθ | 0 |
| -sinθ | -cosθ | 0 |
| 0 | 0 | 1 |
・これはtranslate(x, y)とrotate(θ)を連続して使用した場合の効果と同じ
| cosθ | sinθ | x(1-θ)+y(sinθ) |
| -sinθ | -cosθ | x(-sinθ)+y(1-cosθ) |
| 0 | 0 | 1 |
傾斜
点(x, y)を傾斜に中心にX軸に沿ってΘ、Y軸に沿ってΦ傾斜させる変換行列
・他のメソッドでは表現できない
| 1 | tanΦ | -y(tanΘ) |
| tanΘ | 1 | -x(tanΦ) |
| 0 | 0 | 1 |