EaselJSライブラリのMatrxi2Dクラスによる座標変換は、おもに変換行列の乗算で表されます。そこで、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
preppend(a, b, c, d, tx, ty)	引数の成分が与えられた変換行列を、参照するMatrix2Dオブジェクトの左から乗じる。	a   c   tx  X b d ty 0 0 1
rotate(angle)	参照するMatrix2Dオブジェクトの変換行列を、引数のラジアン角回転する。	cos(angle) -sin(angle) 0 X sin(angle) cos(angle) 0 0 0 1
translate(x, y)	参照するMatrix2Dオブジェクトの変換行列を、引数のxy座標平行移動する。	1   0   x  X 0 1 y 0 0 1
scale(x, y)	参照するMatrix2Dオブジェクトの変換行列を、xy各軸方向に引数の比率伸縮する。ただし、0.6.1の実装では、成分txとtyは値が変わらない。	x   0   0  X 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.append()を別にすると、Matrix2D.skew()だけ行列を右から掛けていることが気になります。おそらく、パラメータ(引数)と変換結果のわかりやすさなどから決められた仕様だと推測されます。

けれど、実装としては成分bとcで傾斜の変換行列を定めることもできます^[*1]。この場合、成分bとcにそれぞれ垂直と水平の傾斜率を与え、変換行列は左から乗じることになります。成分aとdはそれぞれ水平と垂直の伸縮率(前掲Matrix2D.scale()メソッド参照)ですので、4成分の役割がきれいに分かれます。伸縮は実寸(1.0)のままであれば、傾斜の行列演算はつぎのように表されます。なお、角度にもとづいて傾斜率を定めるときは、tan値を与えます。

	1	水平傾斜率	0		X	=		1	tan(skewX)	0		X
	垂直傾斜率	1	0					tan(skewY)	1	0
	0	0	1					0	0	1

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

作成者: 野中文雄
作成日: 2013年5月27日