2016.12.22
2017.4.17

画像のサイズを指定する方法

CreateJSを利用してCanvas上に画像を表示する際、幅や高さでサイズを指定する方法が見当たらなかったので、ここではスケールを指定して画像のサイズを調整する方法を紹介します。

コード


var imageWidth = 100;
var image = new createjs.Bitmap("hoge.png");

// 位置
image.x = 0;
image.y = 0;

// スケール(指定した横幅100pxの画像サイズに縮小または拡大)
image.scaleX = imageWidth / image.getBounds().width;
image.scaleY = image.scaleX;

// x,yの位置に画像の中央が表示されるように設定
image.regX = image.getBounds().width / 2;
image.regY = image.getBounds().height / 2;

画像のサイズ自体はgetBounds()で取得可能です。上記のコードでは表示したい画像の横幅とオリジナルの画像の横幅からスケール値を算出して、表示したい画像サイズに縮小または拡大しています。

なお、regX、regYでオブジェクトの基準点を画像の中心に設定しています。クリックした箇所に画像を表示する場合などで必要になってくる設定かと思います。

参考リンク

CreateJS】関連記事