EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS]

Display Object の基準点(regX, regY) を変えている場合、とMatrix2D.translate がその分ズレるようなのでメモ。

CreateJSのバージョン

確認したEaselJS のバージョン。

EaselJS 0.8.1

基準点（位置）の変更と translate

EaselJS のDisplay Object の回転などに使用する基準点は、(regX: 0, regY: 0) であり、 regX, regY プロパティで変更できる。

基準点は、DisplayObject の中心にしたい場合が多いので、以下のようにそのオブジェクトの半分の位置を与える。


var shape = new createjs.Shape();
shape.regX = [shapeのwidth] / 2;
shape.regY = [shapeのheight] / 2;

このとき、getMatrixで取ってきた行列に、 translate を与えてみるとどうなるか試す。試したサンプルが以下です。 translate(0, 0); にしています。つまり静止したままになるはずです。

codepen.io

結果から、regX, regY を変更をしている DisplayObject は、translate(0,0); でもズレるようです。このズレは、どうやら、regX, regY分のようで、translate では、regX, regYは考慮されていないようです。なので、(-regX, -regY)分ズレているようです。

対策としては、以下2つです。

translate する際に、常に、regX, regY を足しておけば大丈夫です。


matrix.translate(regX, regY); // これで静止（現在位置）


matrix.translate(regX + 10, regY); // 現在位置からx軸+10

1.の方法が煩わしい場合、regX, regY を0 にしておけばよい。つまり、(0, 0)を中心にするようにオブジェクトを描画すればいい（Bitmapインスタンスではできないと思います。）

以下のように、drawRect や drawCircle の開始位置をマイナスから始める。


var width = [shapeのwidth];
var height = [shapeのheight];
var g = new createjs.Graphics()
        .setStrokeStyle(1)
        .beginStroke('#333')
        .beginFill('red')
        .drawRect(-width/2, -height/2, width, height);// 開始位置をマイナスから

var rect = new createjs.Shape(g); // regX, regY = 0 のままその位置が中心になっている
stage.addChild(rect);
stage.update();

このように、基準位置(regX, regY) が違うときに、 Matrix2D.translate を使う場合は注意が必要。