EaselJSライブラリのMatrxi2Dクラスによる座標変換は、おもに変換行列の乗算で表されます^[*1]。そこで、Matrix2Dクラスの基本的なメソッドについて、その行列演算をご紹介します。

Matrix2Dクラス のメソッド	説明	行列演算
Matrix2D(a, b, c, d, tx, ty) (コンストラクタ)	引数の成分が与えられた変換行列のMatrix2Dインスタンスをつくる。デフォルト値は単位行列の成分。	a   c   tx  b d ty 0 0 1
append(a, b, c, d, tx, ty)	引数の成分が与えられた変換行列を、参照するMatrix2Dオブジェクトの右から乗じる。	X  a   c   tx  b d ty 0 0 1
prepend(a, b, c, d, tx, ty)	引数の成分が与えられた変換行列を、参照するMatrix2Dオブジェクトの左から乗じる。	a   c   tx  X b d ty 0 0 1
rotate(angle)	参照するMatrix2Dオブジェクトの変換行列を、引数の角度回転する[*2]。	X cos(angle) -sin(angle) 0 sin(angle) cos(angle) 0 0 0 1
translate(x, y)	参照するMatrix2Dオブジェクトの変換行列を、引数のxy座標平行移動する。	X  1   0   x  0 1 y 0 0 1
scale(x, y)	参照するMatrix2Dオブジェクトの変換行列を、xy各軸方向に引数の比率伸縮する。	X  x   0   0  0 y 0 0 0 1
skew(skewX, skewY)	参照するMatrix2Dオブジェクトの変換行列を、xy各軸方向に引数の度数傾斜する。	X cos(skewY) -sin(skewX) 0 sin(skewY) cos(skewX) 0 0 0 1

Matrix2Dクラスが扱う2次元平面の変換行列は、つぎのような3行×3列の正方行列で表されます。ただし、第3行目の成分は定数([0 0 1])なので、コンストラクタの引数やプロパティに与えられるのは6成分です。

	a	c	tx
	b	d	ty
	0	0	1

行列による2次元空間の座標変換の計算はおもに乗算です。そして、Matrix2Dクラスの基本的なメソッドについて、それぞれの行列演算を示したのが上の表です。「X」は乗算記号と見ても、任意の3次正方(3行×3列)行列のXと捉えても差支えありません。

気をつけていただきたいのは、行列の乗算には交換法則が成立たないことです。つまり、同じ行列を左から掛けるか、右から掛けるかによって、変換の結果は異なります。そのため、メソッドの定める行列を先に(左から)掛けるMatrix2D.prepend()と、後に(右から)掛けるMatrix2D.append()のメソッドが別に備わっています。なお、行列の乗算のやり方については「変換行列を数学的に捉える」2.「行列の乗算」をお読みください。

Matrix2Dクラスでは、成分値をそれぞれ求めて行列変換することもできます。単純な変形にとどまらず、伸縮や傾斜を組合わせるような場合には、統一的に計算できるので扱いやすいでしょう。具体的な例については、「EaselJSのMatrix2Dクラスを使ったインスタンスの変形」をお読みください。

作成者: 野中文雄
作成日: 2015年1月8日「EaselJS 0.6.1のMatrix2Dクラスの基本的なメソッドと行列演算」を、仕様の変更にともなって全面改訂。