Fabric.js 使用纯色遮挡画布（前景色）

德育处主任

发布于 2022-09-23 10:18:37

1.4K0

发布于 2022-09-23 10:18:37

文章被收录于专栏：前端数据可视化

本文简介

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

如果要覆盖 canvas 里的所有内容你会用什么方法？

清空画布内容？

直接移除 canvas 元素？

创建一个新元素放在 canvas 的上一层？

如果你的项目使用到 fabric.js ，可以直接使用 fabric.js 提供的方法去遮盖画布，而且用法非常简单。

设置 canvas.overlayColor

前景色 overlayColor

fabric.js 提供了一个属性可以设置覆盖色，也可以说是设置前景色。

overlayColor :String|fabric.Pattern Overlay color of canvas instance. Should be set via fabric.StaticCanvas#setOverlayColor

使用这个属性可以在画布顶层覆盖一层颜色，可以覆盖画布内所有背景和元素。

能覆盖默认背景色

比如我设置了遮盖色为粉红色

<canvas id="canvasBox"></canvas>

<script>
  let canvas = new fabric.Canvas('canvasBox', {
    overlayColor: 'pink', // 覆盖颜色
    backgroundColor: 'red' // 背景色
  })
</script>

如果上面的代码没有设置 overlayColor 为 pink 的话，画布应该是呈现红色背景的。

能覆盖背景图

<canvas id="canvasBox"></canvas>

<script>
  let canvas = new fabric.Canvas('canvasBox', {
    overlayColor: 'pink' // 覆盖颜色
  })
  
  canvas.setBackgroundImage(
      'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
    canvas.renderAll.bind(canvas)
  )
</script>

我在初始完画布之后，再通过 setBackgroundImage 方法设置画布背景图。

从代码书写顺序看，背景图是最后才设置的，但也不会覆盖到 overlayColor 。

能覆盖元素

如果从直觉上看，背景图是在最底层，所以无法越级覆盖 overlayColor 的话，那我们可以试试创建元素并将元素设置到最顶层，测试一下效果。

<canvas id="canvasBox"></canvas>

<script>
  let canvas = new fabric.Canvas('canvasBox', {
    overlayColor: 'pink' // 覆盖颜色
  })
  let rect = new fabric.Rect({
    width: 80,
    height: 80,
  })

  rect.bringToFront()

  canvas.add(rect)
</script>

使用了 bringToFront() 方法将矩形的层级调到最顶层，也是无法越过 overlayColor 。

移除覆盖层

在某些应用场景（比如游戏）需要提前把画布加载出来，但用户在某一时刻还没权限查看画布内容时，就可以使用 overlayColor 将画布遮盖起来。

我使用 setTimeout 模拟达成某些业务条件后，移除覆盖层的效果。

<canvas id="canvasBox"></canvas>

<script>
  let canvas = new fabric.Canvas('canvasBox', {
    overlayColor: 'pink' // 覆盖颜色
  })

  // 就算用背景图一样会被 overlayColor 覆盖
  canvas.setBackgroundImage(
    'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
    canvas.renderAll.bind(canvas)
  )

  // 元素也会被 overlayColor 覆盖
  let rect = new fabric.Rect({
    width: 80,
    height: 80,
  })

  canvas.add(rect)

  // 1秒后移除覆盖层
  setTimeout(() => {
    canvas.overlayColor = null
    canvas.renderAll()
  }, 1000)
</script>

将 canvas.overlayColor 设置为 null 后，覆盖层就被移除了，设置成 transparent 或者 空字符串 也可以。

移除覆盖层之后，还需要刷新一下画布，我使用了 canvas.renderAll() 。

更灵活的方法 setOverlayColor

除了在创建画布时设置 overlayColor 外，还可以使用 setOverlayColor() 方法在某个时刻设置画布遮罩颜色。

setOverlayColor(overlayColor, callback) 接收2个参数：

overlayColor: 设置前景色或者图案
callback: 回调函数（设置完要刷新画布）

你没看错，setOverlayColor 是可以设置图案的，传入一张图片就行。

我将画布的宽高设置成 800 * 800，方便演示。

设置纯色

// 省略部分代码
canvas.setOverlayColor(
  'yellowgreen', // 设置颜色
  canvas.renderAll.bind(canvas) // 刷新画布
)

如果你还想在回调函数中做点其他事情，可以这样写

// 省略部分代码
canvas.setOverlayColor('pink', function() {
  console.log('完成')
  canvas.renderAll()
})

设置图像

// 省略部分代码
canvas.setOverlayColor(
  { source: '../../images/bg4.png' },
  canvas.renderAll.bind(canvas)
)

第一个参数是对象，在 source 里传入图片路径即可。

上面的例子中，图像是会自动重复渲染的，会铺满整个画布。

除此之外，还可以调节不同属性参数。

// 省略部分代码
canvas.setOverlayColor(
  {
    source: '../../images/bg4.png',
    repeat: 'no-repeat', // 不重复
    offsetX: 200, // x轴方向的偏移
    offsetY: 100 // y轴方向的偏移
  },
  canvas.renderAll.bind(canvas)
)