はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS]

EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS]

EaselJS 0.8.0 から仕様が変わっているようなのでメモ。

以下の記事が日本語で参考になります。

CreateJSのバージョン

使用するEaselJS のバージョン。

  • EaselJS 0.8.1

Matrix2D の生成・取得

Matrix2Dクラスで行列計算を行える。 現在は、3次元はなく、2次元のみ扱えるようだ。


var matrix = new createjs.Matrix2D();

持っているプロパティを行列で表すと以下です。
\begin{bmatrix} a \ c \ tx \\ b \ d \ ty \end{bmatrix}

実際に計算されるときは、以下の3×3 の斉次行列になっているようです。
\begin{bmatrix} a \ c \ tx \\ b \ d \ ty \\ 0 \ 0 \ 1 \end{bmatrix}

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);

この場合、
\begin{bmatrix} 変換前行列 \times 回転行列 \times 並進行列 \end{bmatrix} の順で計算され、 変換前行列が一番左に来るので注意が必要。

回転や並進行列を左から掛けて、 変換前行列を右にくるようにするには、 Matrix2D.prependMatrix() を使う。


var matrix = shape.getMatrix();
matrix
.prependMatrix(new createjs.Matrix2D().rotate(45))
.prependMatrix(new createjs.Matrix2D().translate(10, 10))
.decompose(shape);

この場合、 \begin{bmatrix} 回転行列 \times 並進行列 \times 変換前行列 \end{bmatrix} で計算できる。

codepen.io


scale

Matrix2D().scale(X, Y) は、x軸にX倍, y軸にY倍できる。

scaleX, scaleY プロパティで、 直接指定もできる。

SVG画像の場合、ブラウザによって挙動が変わるので注意。 

cartman0.hatenablog.com

translate

Matrix2D().translate(x, y) 関数で、 現在位置からx, y分移動する。

直接、その位置へ移動したい場合は、 .x, .y プロパティを使用する。

regX, regY が、(0, 0)以外の場合、 regX, regY分も考慮する必要があるので注意。 

cartman0.hatenablog.com

rotate

Matrix2D().rotate(deg) 関数で、 回転。単位は、degree 。

.rotationプロパティで、 直接、回転角も指定できる。

prependMatrix の場合、 stage上の原点が基準となる。 なので、 原点に移動してから、回転、元の位置に戻す といった処理をよく行う。

.rotate(appendMatrix) の場合、 自分自身が基準となる。 回転した後は、x, y軸も回転しているので注意。

skew

Matrix2D().skew(x, y) は、歪ませる。 単位は回転同様、degree。

skewX, skewY プロパティで、 直接指定もできる。