EaselJSで画像をトリミングして表示させる

EaselJSでは、

bitmap = new createjs.Bitmap("test.png")

のようにBitmapクラスに画像のURLを渡し、

canvas = document.getElementById('canvas')
stage  = new createjs.Stage(canvas)

のように作成したステージにBitmapクラスのインスタンスをaddChildしてあげる事でステージ上に追加されます。

stage.addChild(map)

この時、画像を部分的にトリミングして表示させたいといった場合があると思います。

そんな時はBitmapクラスのインスタンスにsourceRectプロパティを設定します。

ドキュメントでは具体的な値の設定方法がくわしく書かれていなかったので、
方法をメモしておきます。

Bitmapクラス中でsourceRectを利用している部分を探してみます。

p.draw = function(ctx, ignoreCache) {
    if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }
        var rect = this.sourceRect;
    if (rect) {
        ctx.drawImage(this.image, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
    } else {
        ctx.drawImage(this.image, 0, 0);
    }
    return true;
}

このようにCanvasAPIのdrawImageメソッドを使って
Canvas上に画像反映させる部分でsourceRectの値が利用されていますね。
処理の内容は、以下のような感じになっています。

sourceRectが設定されていたら(if(rect)の部分)、
this.imageの(sourceRect.x,sourceRect.y)の位置から、
(sourceRect.width, sourceRect.height)の大きさで画像を切り出して、
Canvas上の(0,0)の位置に(sourceRect.height, sourceRect.height) の大きさで表示する。

sourceRectにはオブジェクトでこれらの値を渡してあげれば良いわけですね。

bitmap.sourceRect = {
    x: 10,
    y: 10,
    width : 100,
    height: 100
}

実際にコードを書いてみましょう。

x=10,y=10の位置から幅100,高さ100の画像を切り出す事ができましたね！