关于前端:Fabricjs-使用纯色遮挡画布前景色

本文简介

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

如果要笼罩 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)
)

留神

有一点是须要留神的，overlayColor 的作用是在画布顶部设置一层笼罩色，但画布的操作并没有限度。

还是下面有矩形的例子。

从图中能够看到鼠标指针的变动，能够判断出画布上的矩形依然能被操作。

代码仓库

⭐ Fabric.js 应用纯色遮蔽画布

⭐ Fabric.js setOverlayColor

举荐浏览

👍《Fabric.js 从入门到_ _ _ _》

👍《Fabric.js 上划线、中划线（删除线）、下划线》

👍《Fabric.js 激活输入框》

👍《Fabric.js 输入精简的JSON》

👍《Fabric.js 动静设置字号大小》

👍《Fabric.js IText 手动设置斜体》

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

代码仓库