canvas框架fabric JS 常用api

🌰栗子

• 获得画布上的所有对象 canvas.getObjects()

• 获取画布的活动对象 canvas.getActiveObject()

• 将某个对象设置为活动对象

    let obj = canvas.getObjects()[0] //获取第一个对象
    canvas.setActiveObject(obj).renderAll() //将第一个对象设置为活动对象

• 取消画布中的所有对象的选中状态 canvas.discardActiveObject()

• 移除画布中某个对象

let item = canvas.getObjects()[0]  //移除第一个对象
canvas.remove(item)

• 清除画布中一个或多个活动对象

  if (canvas.getActiveObject()._objects && canvas.getActiveObject()._objects.length > 0) {
      canvas.getActiveObject()._objects.forEach((element) => {
        canvas.remove(element)
     })
     canvas.discardActiveObject()
  } else {
     canvas.remove(canvas.getActiveObject())
  }

• 清除画布中所有对象 canvas.clear();

• 重新渲染一边画布 canvas.renderAll()

• 设置对象能不能选中

  • 当在一个标注框上再进行标注时，会触发选中，导致标注有bug。解决方案：开始标注时设置为不可选中，标注完后重置为可以选中。 canvas.skipTargetFind = false

• 为画布通过URL方式添加背景图片

    var curImg = "http://xxx.png" 

    fabric.Image.fromURL(curImg, (img: any) => {
      img.set({
        scaleX: 1,
        scaleY: 1,
        left: 0,
        top: 0
      })
      canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas))
    })