Fabric.js 使用图片遮盖画布(前景图)

本文简介

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


在 《Fabric.js 使用纯色遮挡画布》 中讲到使用纯色的方式遮盖画布。如果你的常见需要使用图片来遮盖的话,fabric.js 也提供了相应的属性来配置。

相比起使用纯色遮盖画布,使用图片会更复杂。

因为图片本身是有尺寸大小的,所以可能会遇到缩放画布、平移画布等操作。

而纯色的话就不需要管色块的尺寸,移动到哪,怎么缩放都是全屏(整个画布)纯色。



使用图片覆盖画布

如果需要用图片遮盖画布,可以设置 canvasoverlayImage 属性,传入的值就是图片地址。

可以使用网图,也可以使用本地图片。和 backgroundImage 的用法差不多。



这个例子中,原本应该有一个矩形在画布上的,而且背景色也应该是红色。

但设置了 overlayImage ,所以整个画布都被图片覆盖了。


overlayImageoverlayColor 一样,都可以将画布上的所有元素覆盖掉,比如背景图、背景色、图形等元素。



覆盖图像不受视口变换的影响

由于图片是有尺寸的,如果你的场景中,画布可以缩放或者被拖拽,就会出现下图的效果。

覆盖的图片被缩小或者移动后,就露出了背景色(红色)。


如果不希望覆盖图被缩放和平移等操作影响(不受视口变换的影响),可以将 overlayVpt 设为 false



感觉这和 《Fabric.js 锁定背景图,不受缩放和拖拽的影响》 里讲到的有点像,对吧~

所以当看到 fabric.js 的相关属性和方法名称里出现 Vpt ,大概率就和 视口 有关。



更灵活的操作方法 setOverlayImage

使用 setOverlayImage 支持更多配置。

setOverlayImage(image, callback, optionsopt) 接收3个参数

  • image: 图像实例或者URL
  • callback: 回调函数(主要是设置完后刷新画布)
  • optionsopt: 这是可选项,不填也没事。填了就可以设置图像的配置。


// 省略部分代码

canvas.setOverlayImage(
  '../../images/bg4.png',
  canvas.renderAll.bind(canvas),
  {
    originX: 'left',
    originY: 'top'
  }
)

除了设置 originXoriginY 外,还可以设置 topleftopacityangle 等参数。

更多用法可以查看代码仓库



代码仓库

overlayImage 和 overlayVpt

setOverlayImage



推荐阅读

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

《Fabric.js 控制元素层级》

《Fabric.js 上划线、中划线(删除线)、下划线》

《Fabric.js 激活输入框》

《Fabric.js 输出精简的JSON》

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


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

代码仓库

你可能感兴趣的:(前端)