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

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

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

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インスタンスではできないと思います。)

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

    
    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 を使う場合は注意が必要。