LoginSignup
15
15

More than 5 years have passed since last update.

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

Posted at

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

15
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
15