fabricjs控制背景图和画布图片展示

一、控制背景图展示

1.检查画布是否存在背景

在Fabric.js中，可以通过检查canvas.backgroundImage属性来判断画布是否设置了背景图片。如果canvas.backgroundImage不为null或undefined，则表示画布上设置了背景图片。

// 假设canvas是你的fabric.Canvas实例

// 判断是否设置了背景图片
if (canvas.backgroundImage) {
  console.log('画布上设置了背景图片。');
} else {
  console.log('画布上没有设置背景图片。');
}

2.存在，清除画布背景

// 清除背景图
canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas));

3.不存在，添加画布背景

我用的是js方式引入图片

showimgbg() {
      const self = this
      canvas.set('backgroundColor', '#333333')

      const url = `...bg.png` //图片路径
      fabric.Image.fromURL(pcdurl, function (img) {
        // 保证背景图1:1铺满容器
        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
          left: self.width / 2, // 鼠标x轴坐标
          top: self.height / 2, // 鼠标y轴坐标
          originX: 'center',
          originY: 'center',
        })
      })
    },

4.控制背景图展示的完整代码

 //   按钮展示背景图
    showbg() {
      console.log()
      if (canvas.backgroundImage) {
        // 清除背景图
        canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas))
      } else {
        this.showimgbg()
      }
    },

二、控制画布上图片展示

1. 标识图片元素：在添加图片到画布时，给图片元素添加一个可识别的属性，例如type: 'image'，这样你就可以通过这个属性来区分图片和其他类型的元素。

2. 查找图片元素：遍历画布上的所有元素，检查它们是否具有标识图片的属性。

3. 清除图片元素：一旦找到图片元素，就从画布上移除它。

showneirongimg() {
      const self = this
      let num = -1
      const objects = canvas.getObjects()
      for (let i = objects.length - 1; i >= 0; i--) {
        if (objects[i].type === 'image') {
          num = i
        }
      }
      if (num > -1) {
        canvas.remove(objects[num])
      } else {
        const url = `you/img/path.png`
        fabric.Image.fromURL(url, function (img) {
          // 设置图像位置和大小
          img.set({
           type:'image', //为图片添加属性标识
           ...
          })
          canvas.add(img)
          img.sendToBack() // 确保背景图在最后面
        })
      }
    },