本文简介
点赞 + 关注 + 珍藏 = 学会了
在 《Fabric.js 应用纯色遮挡画布》 中讲到应用纯色的形式遮蔽画布。如果你的常见须要应用图片来遮蔽的话，fabric.js 也提供了相应的属性来配置。
相比起应用纯色遮蔽画布，应用图片会更简单。
因为图片自身是有尺寸大小的，所以可能会遇到缩放画布、平移画布等操作。
而纯色的话就不须要管色块的尺寸，挪动到哪，怎么缩放都是全屏（整个画布）纯色。
应用图片笼罩画布
如果须要用图片遮蔽画布，能够设置 canvas 的 overlayImage 属性，传入的值就是图片地址。
能够应用网图，也能够应用本地图片。和 backgroundImage 的用法差不多。
<canvas id="canvasBox"></canvas><script> let canvas = new fabric.Canvas('canvasBox', { // 笼罩图像 overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp', backgroundColor: 'red', // 背景色 }) // 元素也会被 overlayColor 笼罩 let rect = new fabric.Rect({ width: 80, height: 80, }) canvas.add(rect)</script>这个例子中，本来应该有一个矩形在画布上的，而且背景色也应该是红色。
但设置了 overlayImage ，所以整个画布都被图片笼罩了。
overlayImage 和 overlayColor 一样，都能够将画布上的所有元素笼罩掉，比方背景图、背景色、图形等元素。
笼罩图像不受视口变换的影响
因为图片是有尺寸的，如果你的场景中，画布能够缩放或者被拖拽，就会呈现下图的成果。
笼罩的图片被放大或者挪动后，就露出了背景色（红色）。
如果不心愿笼罩图被缩放和平移等操作影响（不受视口变换的影响），能够将 overlayVpt 设为 false 。
<canvas id="canvasBox"></canvas><script> let canvas = new fabric.Canvas('canvasBox', { // 笼罩图像 overlayImage: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp', overlayVpt: false, // 如果设置为假笼罩图像不受视口变换的影响 backgroundColor: 'red', // 背景色 }) // 元素也会被 overlayColor 笼罩 let rect = new fabric.Rect({ width: 80, height: 80, }) canvas.add(rect) // 通过鼠标滚轮缩放画布 canvas.on('mouse:wheel', opt => { const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100 let zoom = canvas.getZoom() // 获取画布以后缩放值 zoom *= 0.999 ** delta if (zoom > 20) zoom = 20 if (zoom < 0.01) zoom = 0.01 canvas.zoomToPoint( { // 关键点 x: opt.e.offsetX, y: opt.e.offsetY }, zoom ) opt.e.preventDefault() opt.e.stopPropagation() }) // 鼠标拖拽画布 canvas.on('mouse:down', opt => { // 鼠标按下时触发 let evt = opt.e canvas.isDragging = true // isDragging 是自定义的 canvas.lastPosX = evt.clientX // lastPosX 是自定义的 canvas.lastPosY = evt.clientY // lastPosY 是自定义的 }) canvas.on('mouse:move', opt => { // 鼠标挪动时触发 if (canvas.isDragging) { let evt = opt.e let vpt = canvas.viewportTransform // 聚焦视图的转换 vpt[4] += evt.clientX - canvas.lastPosX vpt[5] += evt.clientY - canvas.lastPosY canvas.requestRenderAll() canvas.lastPosX = evt.clientX canvas.lastPosY = evt.clientY } }) canvas.on('mouse:up', opt => { // 鼠标松开时触发 canvas.setViewportTransform(canvas.viewportTransform) // 设置此画布实例的视口转换 canvas.isDragging = false })</script>感觉这和 《Fabric.js 锁定背景图，不受缩放和拖拽的影响》 里讲到的有点像，对吧~
所以当看到 fabric.js 的相干属性和办法名称里呈现 Vpt ，大概率就和 视口 无关。
更灵便的操作方法 setOverlayImage
应用 setOverlayImage 反对更多配置。
setOverlayImage(image, callback, optionsopt) 接管3个参数
image: 图像实例或者URLcallback: 回调函数（次要是设置完后刷新画布）optionsopt: 这是可选项，不填也没事。填了就能够设置图像的配置。
// 省略局部代码canvas.setOverlayImage( '../../images/bg4.png', canvas.renderAll.bind(canvas), { originX: 'left', originY: 'top' })除了设置 originX 和 originY 外，还能够设置 top、left、opacity、angle 等参数。
更多用法能够查看代码仓库。
代码仓库
⭐overlayImage 和 overlayVpt
⭐setOverlayImage
举荐浏览
《Fabric.js 从入门到_ _ _ _》
《Fabric.js 管制元素层级》
《Fabric.js 上划线、中划线（删除线）、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输入精简的JSON》
《Fabric.js IText 手动设置斜体》
点赞 + 关注 + 珍藏 = 学会了
代码仓库