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

CreateJS Blogに2018年9月27日付で「[Scaling and Stretching with the ScaleBitmap Class](http://blog.createjs.com/scaling-and-stretching-with-the-scalebitmap-class/)」が公開されました。この記事をもとに、加筆・整理してその内容をご紹介します。

`ScaleBitmap`クラスは、名前のとおりビットマップを伸縮します。このクラスが用いるのは、ビットマップを3×3の矩形領域に分け、領域によって伸縮のし方を変える「[9スライス](https://helpx.adobe.com/jp/fireworks/kb/7092.html)」と呼ばれる手法です。

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


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

#### 図001■コンテンツを9つの矩形領域に分ける
![ScaleBitmap-0-grid1.png](https://blog.createjs.com/wp-content/uploads/2018/09/ScaleBitmap-0-grid1.png)

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

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

#### 図002■9スライスで拡大したコンテンツ
![ScaleBitmap-0-grid2.png](https://blog.createjs.com/wp-content/uploads/2018/09/ScaleBitmap-0-grid2.png)

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


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

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

#### コンストラクタ
```js
ScaleBitmap(imageOrUri, scale9Grid)
```

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

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

#### メソッド
```js
setDrawSize(newWidth, newHeight)
```

#### 引数
- `newWidth`: インスタンスを描く新たな幅。
- `newHeight`: インスタンスを描く新たな高さ。


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

```html:htmlドキュメント
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="./lib/ScaleBitmap.js"></script>
```

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

#### 図003■吹き出しの画像を9スライスする
![ScaleBitmap-2-Lines-50x.png](http://blog.createjs.com/wp-content/uploads/2018/09/ScaleBitmap-2-Lines-50x.png)

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

### コード001■クリックするたびに吹き出し画像の大きさをランダムに変える
```js
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
[![ScaleBitmap.png](https://qiita-image-store.s3.amazonaws.com/0/128949/e117427a-0422-7895-0c26-47e1b6c7ceed.png)
\>> judo.itへ](http://jsdo.it/FumioNonaka/QiXy)

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

#### サンプル002■Happy 2 years, Chris
<p data-height="265" data-theme-id="0" data-slug-hash="NzWLGP" data-default-tab="js,result" data-user="createjs" data-pen-title="Happy 2 years, Chris" class="codepen">See the Pen <a href="https://codepen.io/createjs/pen/NzWLGP/">Happy 2 years, Chris</a> by CreateJS (<a href="https://codepen.io/createjs">@createjs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>