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 = opt.e;
              let vpt = this.canvas.viewportTransform;
              vpt[4] += e.clientX - this.lastPosX
              vpt[5] += e.clientY - this.lastPosY
              this.canvas.requestRenderAll()
              this.lastPosX = e.clientX
              this.lastPosY = e.clientY
            }

当鼠标抬起的时候：

          // 关闭画布移动
          this.isDragging = false

效果如下：

三、删除元素

通过选中元素，点击delete按钮，可直接删除

选中元素

        //选中画布
        'selection:cleared': opt => {
          this.flagUp = false
        },
        //更换选中对象
        'selection:updated': opt => {
          this.flagUp = opt
        },
        //选中对象
        'selection:created': opt => {
          this.flagUp = opt
        }

监听键盘，删除选中的元素、对象

      //监听键盘事件
      document.addEventListener('keyup', e => {
        //当按下delete删除选中的对象
        if (this.flagUp && e.key === 'Delete') {
          //判断文字是否在编辑状态
          if (this.flagUp.selected[0].isEditing === true) return
          this.flagUp.selected.forEach(item => {
            this.canvas.remove(item)
          })
          //抛弃当前处于活动状态的Object
          this.canvas.discardActiveObject()
          this.flagUp = false
        }
      })

效果如下：

四、画布的放大缩小

在选择按钮下面，通过按住Ctrl按键，然后滚动滚轮，或者直接滚动滚轮，实现画布的放大和缩小

import numpy as np

五、画布的上一步、下一步

在进行删除等操作之后，可以通过上一步、下一步等操作恢复、撤销恢复画布中的对象

首先先把画面布局修改一下

      <!-- 操作按钮 -->
      <el-row @change="operationClickEvent">
        <el-button size="small" v-for="item in operationMenubarFun" :key="item.id" @click="operationClickEvent(item.name)" :title="item.title">{{ item.title }}</el-button>
      </el-row>

然后根据operationClickEvent方法，实现上一步和下一步

        case 'back':
          //需要将每次绘画的对象存在一个栈中，对栈顶的元素进行删除操作
          if (this.backStack.length == 0) return
          //要删除的对象
          let backObj = this.backStack[this.backStack.length - 1]
          this.canvas.remove(backObj)
          //将删除的元素存到删除栈中
          this.nextStack.push(backObj)
          //更改栈的长度
          this.backStack.length = this.backStack.length - 1
          this.canvas.requestRenderAll()
          break
        case 'next':
          //将删除的元素在压入栈顶
          if (this.nextStack.length == 0) return
          //将最后元素添加在画布中
          let nextObj = this.nextStack[this.nextStack.length - 1]
          this.canvas.add(nextObj)
          //将刚刚元素加入到back栈中
          this.backStack.push(nextObj)
          //改变栈的长度
          this.nextStack.length = this.nextStack.length - 1
          this.canvas.requestRenderAll()
          break
       
          //获取当前画布的宽和高
          this.form = {
            setWidth: this.canvas.getWidth(),
            setHeight: this.canvas.getHeight()
          }
          //显示设置
          this.dialogFormVisible = true
          this.canvas.requestRenderAll()
          break

效果如下：

六、对象的属性修改

1.修改属性

代码如下（示例）：

<span class="top1">宽度：</span>
          <div><el-input v-model="borderWidth" @change="borderWidthChange" placeholder="请输入内容" size="small"></el-input></div>
          <span class="top1">边框颜色：</span>
          <div><el-color-picker v-model="borderColor" @change="borderColorChange" size="small"></el-color-picker></div>

      //全局属性设置
      borderWidthChange(value){
        this.borderWidth=value
      },
      borderColorChange(value){
        this.borderColor=value
      },

效果如下：

总结

关于vue2+Fabric.js库的使用就介绍到这里，后续可根据这个再自己进行优化，叠加功能