話不多說(shuō) 直接貼代碼

一、實(shí)現(xiàn)鼠標(biāo)滾輪縮放畫(huà)布

// 可以實(shí)現(xiàn)鼠標(biāo)滾輪縮放 最小為原來(lái)的百分之一，最大為原來(lái)的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()
    })

使用說(shuō)明，我的canvas畫(huà)布定義為 canvas，替他均不用額外設(shè)置變量。canvas = new fabric.Canvas('editorCanvas', {...

二、實(shí)現(xiàn)鼠標(biāo)按下變抓手，并可移動(dòng)畫(huà)布中內(nèi)容

// 鼠標(biāo)按下事件
    canvas.on('mouse:down', function (e) {
      this.panning = true
      canvas.selection = false
    })
    // 鼠標(biāo)抬起事件
    canvas.on('mouse:up', function (e) {
      this.panning = false
      canvas.selection = true
    })
    // 移動(dòng)畫(huà)布事件
    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)
      }
    })

使用說(shuō)明：data中定義panning: false,用來(lái)標(biāo)記鼠標(biāo)按下?tīng)顟B(tài)（是否鼠標(biāo)按下）。

原理，通過(guò)偏移量

添加 鼠標(biāo)為縮放原點(diǎn)：
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-703931.html

"mouse:wheel": (e) => {
            this.zoom = (event.deltaY > 0 ? -0.1 : 0.1) + canvas.getZoom();
            this.zoom = Math.max(0.1, this.zoom); //最小為原來(lái)的1/10
            this.zoom = Math.min(3, this.zoom); //最大是原來(lái)的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
            
          },
————————————————
版權(quán)聲明：本文為CSDN博主「qq_38860536」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38860536/article/details/104759042

到了這里，關(guān)于Fabric.js+vue 實(shí)現(xiàn)鼠標(biāo)滾輪縮放畫(huà)布+移動(dòng)畫(huà)布的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！