CreateJS 1.0.0: ScaleBitmapクラスでビットマップを伸縮させる

CreateJS Blogに2018年9月27日付で「Scaling and Stretching with the ScaleBitmap Class」が公開されました。この記事をもとに、加筆・整理してその内容をご紹介します。

ScaleBitmapクラスは、名前のとおりビットマップを伸縮します。このクラスが用いるのは、ビットマップを3×3の矩形領域に分け、領域によって伸縮のし方を変える「9スライス」と呼ばれる手法です。

CreateJSのドキュメントで見た覚えがないと思われるかもしれません。実は、CreateJSの標準ライブラリには含まれていないのです。ScaleBitmapクラスは、EaselJSライブラリをダウンロードしたときの「extras」フォルダに納められています。

伸縮のし方

9スライスは、矩形のコンテンツを水平・垂直それぞれ2本の直線で、9つの矩形領域に分けます(図001)。

図001■コンテンツを9つの矩形領域に分ける

そして、9つの矩形は位置に応じて、つぎのように伸縮されます(図002)。

• 四隅の矩形(1、3、7、9)は標準の大きさのまま
• 左右の間(4と6)は垂直方向にのみ伸縮↔️
• 上下の間(2と8)は水平方向にのみ伸縮↔️
• 中央(5)は水平・垂直ともに伸縮↔️↕️

図002■9スライスで拡大したコンテンツ

9スライスが役立つ典型は、角丸四角形の伸縮です。四隅の領域を保てば、伸縮しても角丸の半径が変わりません。

おもなメソッドと構文

ScaleBitmapクラスでおもに使うのは、コンストラクタとScaleBitmap.setDrawSize()メソッドです。

ScaleBitmap()コンストラクタは、画像のソースから9スケールの寸法が定められたインスタンスをつくります。

コンストラクタ

ScaleBitmap(imageOrUri, scale9Grid)

引数

• imageOrUri: 表示する画像のソースオブジェクトまたはURI。
  • オブジェクトはImageかCanvasまたはVideo。
  • URIは使う画像ファイルのパスを示す文字列。Imageオブジェクトがつくられて、ScaleBitmap.imageプロパティに割り当てられる。
• scale9Grid: 9スケールの中央領域を示すrectangleオブジェクト。

そして、9スケールの定めにもとづいて、新たな大きさのインスタンスを描くのが、ScaleBitmap.setDrawSize()メソッドです。

メソッド

setDrawSize(newWidth, newHeight)

引数

• newWidth: インスタンスを描く新たな幅。
• newHeight: インスタンスを描く新たな高さ。

サンプルコード

ScaleBitmapクラスを使うには、CreateJS標準ライブラリに加えて、ダウンロードしたScaleBitmap.jpを<script>要素に読み込んでください。

htmlドキュメント

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="./lib/ScaleBitmap.js"></script>

EaselJSのextras/ScaleBitmapフォルダには、角丸の吹き出し画像を9スライスして伸縮するサンプルコードが添えられています(図003)。

図003■吹き出しの画像を9スライスする

そのサンプルコードをECMAScript 2015(ES6)の構文に書き替えたのが、つぎのコード001です。Canvasをクリックするたびに、吹き出し画像の大きさがランダムに変わります。それでも、四隅の角丸の半径はもとのままです。以下のサンプル001をjsdo.itに掲げましした。

コード001■クリックするたびに吹き出し画像の大きさをランダムに変える

let stage;
function init() {
	const url = 'ScaleBitmapImage.png';
	const centerRect = new createjs.Rectangle(12, 12, 5, 10);
    stage = new createjs.Stage("canvas");
    const image = new Image();
    image.addEventListener('load', (event) => stage.update());
    image.src = url;
    const scaleBitmap = new createjs.ScaleBitmap(image, centerRect);
    scaleBitmap.setDrawSize(200, 300);
    stage.addChild(scaleBitmap);
    stage.addEventListener('stagemousedown', (event) => {
        scaleBitmap.setDrawSize(Math.random() * 300 + 100 | 0, Math.random() * 100 + 60 | 0);
        stage.update();
    });
}
document.addEventListener('DOMContentLoaded', init);

サンプル001■CreateJS 1.0.0: Using ScaleBitmap class

>> judo.itへ

この吹き出しのJavaScriptコードは、CreateJSのanniversary codepenでつぎのサンプル002に使われています。

サンプル002■Happy 2 years, Chris

See the Pen Happy 2 years, Chris by CreateJS (@createjs) on CodePen.