サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算

ID: FN1501003 Technique: HTML5 and JavaScript Library: EaselJS 0.8.0

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クラスを使ったインスタンスの変形」をお読みください。

[*1] EaselJS 0.8.0では、多くの変換のメソッドにおいて0.7.1以前のバージョンと行列の乗算の順序が変わりました。これは、Matrixクラスの仕様をContext2DやCSSに合わせ、内部的な整合性をとったためだということです(「Matrix2D not translating the same as previous versions」参照)。EaselJSのMatrix2Dの古い行列演算については、「EaselJS 0.6.1のMatrix2Dクラスの基本的なメソッドと行列演算」をご覧ください。

[*2] 古いバージョン(0.7.1以前)では、引数の角度はラジアン値でした。EaselJS 0.8.0から、単位が度数に変わります。



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


Copyright © 2001-2015 Fumio Nonaka.  All rights reserved.