CreateJSでcanvasに読み込んだ画像の基準点を設定する方法

More than 1 year has passed since last update.

CreateJSを用いてcanvasに読み込んだ画像の基準点を設定する方法です。
※デフォルトではオブジェクトの左上(0,0)が基準点のようです。

javascript
window.onload = function(){

    var stage = new createjs.Stage('canvas');

    var queue = new createjs.LoadQueue();

    queue.addEventListener('complete', function(e){

        // Bitmapオブジェクトを生成
        var bitmap = new createjs.Bitmap(queue.getResult('image_1'));
        stage.addChild(bitmap);

        // Bitmapオブジェクトの中心座標を取得
        var x = bitmap.getBounds().width / 2;
        var y = bitmap.getBounds().height / 2;

        // Bitmapオブジェクトの基準点を画像の中心に設定
        bitmap.x = x;
        bitmap.y = y;
        bitmap.regX = x;
        bitmap.regY = y;

        // Bitmapオブジェクトを90度回転
        bitmap.rotation = 90;

    });

    queue.loadManifest([
        {id: 'image_1', src: 'images/image_1.png'}
    ]);

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener('tick', function(){
        stage.update();
    });

}

画像の読み込みが終わり、Bitmapオブジェクトが生成された時点で、getBoundsメソッドを用いて矩形領域を取得します。
短形領域の中心座標をBitmapオブジェクトの基準点として設定し、90度回転させました。
基準点はregX、regYプロパティで設定。
また、Bitmapオブジェクトの座標も変更しないと、基準点を変更した時点でBitmapオブジェクトがデフォルト座標(0,0)にズレてしまうので、こちらも変更。