共计 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> |
如果下面的代码没有设置 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 手动设置斜体》
点赞 + 关注 + 珍藏 = 学会了
代码仓库