vue2+Fabric.js库的使用（7）--Fabric的画板项目完善1

前言

上两篇文章已经可以在画布上绘制基础的图形了，但是比较死板，没有其它的设置，如对画布的设置，对已经画好的对象的操作等，本篇文章还是，会针对这些问题，对这个项目进行完善

提示：以下是本篇文章正文内容，下面案例可供参考

一、画布的放大缩小

在选择按钮下面，通过滚动滚轮，实现画布的放大和缩小

          // 监听鼠标滚轮缩放事件
          'mouse:wheel': opt => {
   
   
            const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
            let zoom = this.canvas.getZoom() // 获取画布当前缩放值
            zoom *= 0.999 ** delta
            if (zoom > 20) zoom = 20 // 限制最大缩放级别
            if (zoom < 0.01) zoom = 0.01 // 限制最小缩放级别

            // 以鼠标所在位置为原点缩放
            this.canvas.zoomToPoint(
              {
   
    // 关键点
                x: opt.e.offsetX,
                y: opt.e.offsetY
              },
              zoom // 传入修改后的缩放级别
            )
          },

效果如下：

二、画布的平移

在选择按钮下面，通过按住Ctrl按键，鼠标左键按下，实现画布的移动

当鼠标按下的时候：

          // 是否按住alt，可以拖拽画布
          if (evt.altKey === true) {
   
   
              this.isDragging = true  // isDragging 是自定义的，开启移动状态
              this.lastPosX = evt.clientX
              this.lastPosY = evt.clientY
            }

当鼠标移动的时候：

          // 鼠标移动，移动画布
          if (this.isDragging) {
   
   
              let e