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

49次阅读

共计 3034 个字符,预计需要花费 8 分钟才能阅读完成。

本文简介

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

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

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

能笼罩背景图

<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 手动设置斜体》

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

代码仓库

正文完
 0