在 fabric.js 画布上添加遮罩层

Question

我有一个问题，我想在可编辑的fabric.js HTML5 画布上添加圆形遮罩。 本文描述了类似的问题：

Creating an Image Mask with 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);
};