Fabric.js 使用图片遮盖画布（前景图）

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第16篇文章，点击查看活动详情

本文简介

点赞 + 关注 + 收藏 = 学会了

在《Fabric.js 使用纯色遮挡画布(前景色)》中讲到使用纯色的方式遮盖画布。如果你的常见需要使用图片来遮盖的话，fabric.js 也提供了相应的属性来配置。

相比起使用纯色遮盖画布，使用图片会更复杂。

因为图片本身是有尺寸大小的，所以可能会遇到缩放画布、平移画布等操作。

而纯色的话就不需要管色块的尺寸，移动到哪，怎么缩放都是全屏(整个画布)纯色。

如果需要用图片遮盖画布，可以设置 canvas 的 overlayImage 属性，传入的值就是图片地址。

可以使用网图，也可以使用本地图片。和 backgroundImage 的用法差不多。

```html

```

这个例子中，原本应该有一个矩形在画布上的，而且背景色也应该是红色。

但设置了 overlayImage ，所以整个画布都被图片覆盖了。

overlayImage 和 overlayColor 一样，都可以将画布上的所有元素覆盖掉，比如背景图、背景色、图形等元素。

由于图片是有尺寸的，如果你的场景中，画布可以缩放或者被拖拽，就会出现下图的效果。

覆盖的图片被缩小或者移动后，就露出了背景色(红色)。

如果不希望覆盖图被缩放和平移等操作影响(不受视口变换的影响)，可以将 overlayVpt 设为 false 。

```html

```

所以当看到 fabric.js 的相关属性和方法名称里出现 Vpt ，大概率就和视口有关。

使用 setOverlayImage 支持更多配置。

setOverlayImage(image, callback, optionsopt) 接收3个参数

```js // 省略部分代码

canvas.setOverlayImage( '../../images/bg4.png', canvas.renderAll.bind(canvas), { originX: 'left', originY: 'top' } ) ```

除了设置 originX 和 originY 外，还可以设置 top、left、opacity、angle 等参数。

更多用法可以查看代码仓库。