Matrixと行列


Matrixクラスは以下のような機会で用いることがあります。
・DisplayObjectインスタンスを移動、拡大・縮小、回転させる
・BitmapDataクラスのdrawメソッドの引数として使用

Matrixとは数学で言うと行列なのですが、行列の知識がなくとも簡単に利用できてしまいます。それで充分な気もしますが、数学的に行列を理解するこで、更に深くMatrixクラスを理解するのが今回の目的です。

まず数学は抜きにしてMatrixクラスを使用してみます。

Matrix – wonderfl build flash online

まず、DisplayObject(ここでは_rect)からMatrixインスタンスを取得する。

MatrixインスタンスをMatrixクラスのメソッド、translate()、scale()、rotate()によって変換後、
DisplayObjectのmatrixプロパティに設定します。

行列は以下のように縦横に数値を並べたものです。行数と列数は任意です。
行列

Matrixクラスで用いる行列は以下のようになります。
Matrixクラスの行列


ただし、a,b,c,d,tx,tyに入る値は変換の種類によって違っていて、それぞれ以下のようになります。
移動の場合↓



拡大・縮小の場合↓
拡大・縮小


回転の場合↓
回転


このような変換行列をxy座標に掛けることによって変換後の座標を求めることができます。
Matrixクラスで行われている掛け算は以下のようになります。
注意して欲しいのは(x,y)で表される座標は、”1″をくっつけて(x,y,1)になります(移動を扱うためです)。
行列の掛け算


具体的な計算例を示したいと思います。
四角形が置かれています。四隅の座標は以下のようなっています。
sample


これをx方向に-50、y方向に-50移動させてみます。
目視で答えは簡単にわかりますが、左上が原点にくるように移動されるはずです。

まず、移動なのでa=d=1,b=c=0となります。
そして、x方向に-50だけ移動したいので、tx=-50となります。
同様に、y方向に-50だけ移動したいので、ty=-50です。
これらの値を上記の計算式にあてはめます。



これより、それぞれの座標は次のように変換されます。
(50-50 50-50)=(0 0)
(200-50 50-50)=(150 0)
(200-50 150-50)=(150 100)
(50-50 150-50)=(0 100)
四角形は無事、左上が原点にくるように移動されました。

Matrixクラスではこういった処理を行ってくれているのです。
実際にMatrixクラスを使用する際に、こういった行列計算を意識することはありませんが、
行列の知識がいつか何かの役に立つかもしれません。願わくば。。。

wonderflのコード↓