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

More than 5 years have 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)にズレてしまうので、こちらも変更。