EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS]
EaselJS 0.8.0 から仕様が変わっているようなのでメモ。
以下の記事が日本語で参考になります。
-
FN1308001 | EaselJSのMatrix2Dオブジェクトの変換行列を適用する | HTML5 : テクニカルノート
-
FN1501003 | EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算 | HTML5 : テクニカルノート
CreateJSのバージョン
使用するEaselJS のバージョン。
-
EaselJS 0.8.1
Matrix2D の生成・取得
Matrix2Dクラスで行列計算を行える。 現在は、3次元はなく、2次元のみ扱えるようだ。
var matrix = new createjs.Matrix2D();
持っているプロパティを行列で表すと以下です。
実際に計算されるときは、以下の3×3 の斉次行列になっているようです。
Doc: EaselJS v0.8.1 API Documentation : Matrix2D
Display Objectが持っている行列を取得するには、 DisplayObject.getMatrix()
関数を使う。
var shape = new createjs.Shape(graphic);
var matrix = shape.getMatrix();
console.log(matrix);
また、現在のスケールや並進された行列をリセットするには、 Matrix2D.identity();
関数を使う。単位行列となり、 DisplayObjectが regX, regY を基準に原点にあるように考えることができる。
var matrix = shape.getMatrix();
matrix.identity();
console.log(matrix);
行列の 並進は translate();
、 回転は rotate()
、 歪みは skew()
、 で変更でき、実際に変形を適用するには、 decompose()
関数を使う。
var matrix = shape.getMatrix();
matrix.translate(10, 0);
matrix.decompose(shape);
行列計算
バージョンによる行列計算の違い
EaselJS 0,8.0 から translate()
, rotate()
, skew()
は、行列の右から掛けられて計算される(appendMatrix)。
var matrix = shape.getMatrix();
matrix
.rotate(45)
.translate(10, 10)
.decompose(shape);
この場合、
の順で計算され、 変換前行列が一番左に来るので注意が必要。
回転や並進行列を左から掛けて、 変換前行列を右にくるようにするには、 Matrix2D.prependMatrix()
を使う。
var matrix = shape.getMatrix();
matrix
.prependMatrix(new createjs.Matrix2D().rotate(45))
.prependMatrix(new createjs.Matrix2D().translate(10, 10))
.decompose(shape);
この場合、 で計算できる。
scale
Matrix2D().scale(X, Y)
は、x軸にX倍, y軸にY倍できる。
scaleX, scaleY
プロパティで、 直接指定もできる。
SVG画像の場合、ブラウザによって挙動が変わるので注意。
translate
Matrix2D().translate(x, y)
関数で、 現在位置からx, y分移動する。
直接、その位置へ移動したい場合は、 .x, .y
プロパティを使用する。
regX, regY が、(0, 0)以外の場合、 regX, regY分も考慮する必要があるので注意。
rotate
Matrix2D().rotate(deg)
関数で、 回転。単位は、degree 。
.rotation
プロパティで、 直接、回転角も指定できる。
prependMatrix
の場合、 stage上の原点が基準となる。 なので、 原点に移動してから、回転、元の位置に戻す といった処理をよく行う。
.rotate(appendMatrix)
の場合、 自分自身が基準となる。 回転した後は、x, y軸も回転しているので注意。
skew
Matrix2D().skew(x, y)
は、歪ませる。 単位は回転同様、degree。
skewX, skewY
プロパティで、 直接指定もできる。
参考リンク
-
FN1308001 | EaselJSのMatrix2Dオブジェクトの変換行列を適用する | HTML5 : テクニカルノート
-
FN1501003 | EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算 | HTML5 : テクニカルノート