<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: 图画实例或许URL
• callback: 回调函数（主要是设置完后改写画布）
• 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 手动设置斜体》

点赞 + 重视 + 保藏 = 学会了