javascript - fabric.js キャンバスにマスク レイヤーを追加する

Question

編集可能なfabric.js HTML5 キャンバスの上に丸いマスクを追加したいという問題があります。同様の問題は、この記事で説明されています。

HTML 5 Canvas でイメージ マスクを作成する

私の問題は、fabric.js キャンバスの上にこのレイヤーを追加すると、キャンバスがこの透明な円の中で編集できなくなることです。これは、一番上の要素 (マスク) がクリック/ドラッグ イベントをキャプチャすることを意味しますが、アイテムをこのマスク要素の下に移動したいと思います。アイデアを探して、この問題を回避する方法。

Answer 1

ファブリックのマスクの組み込みサポートを利用できます。

以下は、100/100 で半径 200 の円形マスクを作成する例です。

var canvas = new fabric.Canvas('...');
// ...
canvas.clipTo = function (ctx) {
  ctx.arc(100, 100, 200, 0, Math.PI*2, true);
};