javascript - 在 fabric.js Canvas 上添加 mask 层

Question

我有一个问题，我想在可编辑的 fabric.js 顶部添加圆形 mask HTML5 Canvas 。这篇文章中描述了类似的问题:

Creating an Image Mask with HTML 5 Canvas

我的问题是，当我在 fabric.js Canvas 上添加此层时，我的 Canvas 在这个透明圆圈内不再可编辑。这意味着顶部元素(掩码)捕获单击/拖动事件，但我想将项目移动到此掩码元素下。寻找想法，如何解决这个问题。

Answer 1

您可以在织物中使用内置的掩码支持。

以下是创建半径为 200 的 100/100 圆形蒙版的示例:

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