javascript - 前端 canvas 使用 fabric.js 如何做出遮住的效果？

Question

请问 canvas 如何做出像如上图片的效果，图片中的手机壳摄像头是会遮住那个心的图案的，其它位置则不会，大概思路是怎么样的呢？这里就是有两个图层，一个作为背景图，一个是遮罩图，如下图

Answer 1

如果你想要在 fabric.js 中实现遮住的效果，有两种常见的方式：

使用遮罩（Mask）
fabric.js 中提供了mask属性来实现遮罩的效果，可以将一个固定大小的遮罩图形应用到另一个对象上，从而实现遮罩的效果。

具体实现步骤如下：

创建一个遮罩对象：可以是任何一个固定大小的 fabric 对象，比如一个矩形或圆形；
创建需要被遮罩的对象；
将遮罩对象的objectCaching属性设置为false；
设置被遮罩的对象的mask属性为遮罩对象。
示例代码：

// 创建一个矩形做遮罩
var maskRect = new fabric.Rect({
  width: 200,
  height: 200,
  left: 0,
  top: 0,
  fill: 'black',
  opacity: 0.5,
  selectable: false,
  evented: false
});
// 创建需要被遮罩的文本对象
var text = new fabric.Text('Hello World', {
  left: 50,
  top: 50,
  fill: 'white'
});

// 将遮罩对象的 objectCaching 属性设置为 false，否则遮罩无法生效
maskRect.objectCaching = false;
// 将文本对象的 mask 属性设置为遮罩对象
text.mask = maskRect;

// 添加到 canvas 中查看效果
canvas.add(maskRect);
canvas.add(text);

2使用裁剪（Clip）

具体实现步骤如下：

在需要裁剪的对象上设置clipTo属性为一个函数；
在clipTo函数内部实现裁剪的逻辑；
在渲染时，fabric.js 会自动调用clipTo函数来裁剪对象。
示例代码：

// 创建一个矩形做裁剪区域
var clipRect = new fabric.Rect({
  width: 200,
  height: 200,
  left: 0,
  top: 0,
  selectable: false,
  evented: false
});

// 创建需要被裁剪的文本对象
var text = new fabric.Text('Hello World', {
  left: 50,
  top: 50,
  fill: 'white'
});

// 在文本对象上设置 clipTo 属性
// 渲染时，裁剪区域 clipRect 会被作为参数传入
text.clipTo = function(ctx) {
  // 绘制裁剪区域
  clipRect.render(ctx);
};

// 添加到 canvas 中查看效果
canvas.add(clipRect);
canvas.add(text);
fabric.js 中也提供了clipTo属性来实现裁剪的效果，可以将对象在渲染时裁剪成指定的形状。

这两种方式的区别在于：

遮罩（Mask）通常用于将一个对象根据遮罩图形进行隔离和遮盖，遮罩对象不会被裁剪；
裁剪（Clip）通常用于将对象裁剪成指定的形状，被裁剪对象的形状会发生改变。