Fabric.js 使用纯色遮挡画布(前景色)

2022/12/24 4:24:09

本文主要是介绍Fabric.js 使用纯色遮挡画布(前景色),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

本文简介

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

如果要覆盖 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

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


能覆盖默认背景色

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

file

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

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

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


能覆盖背景图

file

<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 的话,那我们可以试试创建元素并将元素设置到最顶层,测试一下效果。

file

<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 模拟达成某些业务条件后,移除覆盖层的效果。

file

<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,方便演示。


设置纯色

file

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

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

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

设置图像

file

// 省略部分代码
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 的作用是在画布顶部设置一层覆盖色,但画布的操作并没有限制。

还是上面有矩形的例子。

file

从图中可以看到鼠标指针的变化,可以判断出画布上的矩形仍然能被操作。



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

代码仓库



这篇关于Fabric.js 使用纯色遮挡画布(前景色)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程