2012年4月18日水曜日

canvasのマトリックス(setTransform)について

oreireyのHTML5Canvas内 P43 CH2EX10.html

・マトリクス
|a  , b , c  , d , tx , ty |
setTransform(1 , 0 , 0 , 1 , 0 , 0)

(最終行[ 0 , 0 , 1]は内部的の補完されていると思われる)
このあたりはフラッシュ同様
| 1 , 0 | | x |
| 0 , 1 | | y  |

| a , c | | x |
| b , d | | y  |
のa , b , c , dの要素は拡大・縮小・回転・傾斜を調整可能。
座標の移動を行うためtx , tyを追加する

| a , c , tx   |   | x |
| b , d  , ty  |   | y  |

| 0 , 0 , 1    |   | 1  |




・setTransformをセットしてから描く
・単独でrotateやtranslateを用いる場合も同様(上記の部分機能だからあたりまえか)
・単独で用いる場合は単位行列(だっけ?[ 1 , 0  , 0 , 1 , 0 , 0 ])をセットし初期化する
・Flashと違い左上原点考慮ではなく、描画中心点を移動させてから描画する印象
(moveToしてから描画するのに近い?)
もうちょっと読んでから整理してみる

2012.5.14追記

0 件のコメント:

コメントを投稿