【createjs】図形をくりぬく方法 - アウトプットブログ

今回はcreatejsで図形をくりぬく方法です。
備忘録的な意味でも記録しておこうと思います。

やりたいこと

createjsで画像を範囲選択する機能を作成しました。
範囲を示す図形は赤の破線で実装しています。

ただ、なんとなくこれが気に入らない。
ので、Windowsの画面キャプチャのような見た目にしたい。
切り取る範囲以外がグレーがかる感じです。

変更のイメージ。

図形をくりぬくには

一部分だけくりぬかれた画像を表示するには、全体を一旦グレーで塗ってから透明の図形でくり抜く必要があります。
以下イメージ。

通常canvasを扱う際に下に描画されている図形をくりぬくには、contextのglobalCompositeOperation属性に"destination-out"を指定すれば実現できます。
同じようにcreatejsで"destination-out"の指定を行うには、cacheを使用する必要があります。

DisplayObject.cache(x, y, width, height, [scale=1], [options=undefined])

一時的に別の領域に描画をした上で、画面の描画に使用するようです。
ｘ, y, width, heightで指定した領域を、別のcanvasに描画するイメージでしょうか。

DisplayObject.updateCache(compositeOperation)

キャッシュに再描画をします。
stage.updateのキャッシュバージョンと思っておけばよさそうです。
この引数に"destination-out"を指定してあげれば、図形をくりぬくことができます。

試してみる

test.html

<html>
<head>
  <meta charset="utf-8" />
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <script src="./js/test.js"></script>
</head>
<body>
  <canvas id="myCanvas" width="300" height="300" style="border:solid 1px black;"></canvas>
</body>
</html>

js/test.js

window.addEventListener("load", init);

function init() {
  let stage = new createjs.Stage("myCanvas");

  stage.addChild(new createjs.Bitmap("img/red_dot.png"));

  let rect = stage.addChild(new createjs.Shape());

  rect.graphics
    .f("#000000")
    .dr(0, 0, 300, 300);
  rect.alpha = 0.8;
  rect.cache(0, 0, 300, 300);

  rect.graphics
    .c()
    .f("#00FFFF")
    .dr(50, 50, 100, 100);
  rect.updateCache("destination-out");

  createjs.Ticker.on("tick", function () {
    stage.update();
  });
}