Fabric.js+vue 实现鼠标滚轮缩放画布+移动画布

话不多说 直接贴代码

一、实现鼠标滚轮缩放画布

// 可以实现鼠标滚轮缩放 最小为原来的百分之一，最大为原来的20倍
    canvas.on('mouse:wheel', function (opt) {
      var delta = opt.e.deltaY
      var zoom = canvas.getZoom()
      zoom *= 0.999 ** delta
      if (zoom > 20) zoom = 20
      if (zoom < 0.01) zoom = 0.01
      this.setZoom(zoom)
      opt.e.preventDefault()
      opt.e.stopPropagation()
    })

使用说明，我的canvas画布定义为 canvas，替他均不用额外设置变量。canvas = new fabric.Canvas('editorCanvas', {...

二、实现鼠标按下变抓手，并可移动画布中内容

// 鼠标按下事件
    canvas.on('mouse:down', function (e) {
      this.panning = true
      canvas.selection = false
    })
    // 鼠标抬起事件
    canvas.on('mouse:up', function (e) {
      this.panning = false
      canvas.selection = true
    })
    // 移动画布事件
    canvas.on('mouse:move', function (e) {
      if (this.panning && e && e.e) {
        var delta = new fabric.Point(e.e.movementX, e.e.movementY)
        canvas.relativePan(delta)
      }
    })

使用说明：data中定义panning: false,用来标记鼠标按下状态（是否鼠标按下）。

原理，通过偏移量

添加 鼠标为缩放原点：
 

"mouse:wheel": (e) => {
            this.zoom = (event.deltaY > 0 ? -0.1 : 0.1) + canvas.getZoom();
            this.zoom = Math.max(0.1, this.zoom); //最小为原来的1/10
            this.zoom = Math.min(3, this.zoom); //最大是原来的3倍
            this.zoomPoint = new fabric.Point(e.pointer.x,e.pointer.y);
            canvas.zoomToPoint(this.zoomPoint, this.zoom);
            
            this.lastzoomPoint.x = this.lastzoomPoint.x + (this.zoomPoint.x - this.lastmousePoint.x - this.relativeMouseX) / this.lastzoom
            this.lastzoomPoint.y = this.lastzoomPoint.y + (this.zoomPoint.y - this.lastmousePoint.y - this.relativeMouseY) / this.lastzoom
 
            this.lastmousePoint.x = this.zoomPoint.x
            this.lastmousePoint.y = this.zoomPoint.y
            this.lastzoom = this.zoom
          
            this.tempmouseX = this.relativeMouseX
            this.tempmouseY = this.relativeMouseY
            this.relativeMouseX = 0
            this.relativeMouseY = 0
            
          },
————————————————
版权声明：本文为CSDN博主「qq_38860536」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38860536/article/details/104759042