Vue-cli中使用FabricJS实现鼠标框选

最近接到了一个项目需求，要求从后台获取一张图片（以下称做底图），然后再在这张图片上实现鼠标框选。

接到这个需求后第一反应是h5的canvas , 后来经过技术选型选择了fabricjs

官网地址： fabricjs.com/

fabricjs中文文档: gitee.com/eternitywit…

为什么要使用fabricjs？

两个原因：

• fabricjs帮助使用者做了很多边缘处理，直接避免了原生canvas的边缘坑
• fabricjs是对对象的操作，编程方式更接近vue

Vue中使用fabricjs

方法一

// 安装
npm i fabric --save

// main.js中全局使用
import fabric from "fabric"
Vue.use(fabric)

方法二 （如果方法一报错了）

// 安装canvas
npm i canvas --save
// fabricjs
npm i fabric --save

// 页面单独引用
import { fabric } from "fabric"

功能实现：千言万语都在代码和注释里了（vue-cli 4.5.0 + and-design-vue 1.7.5）

<template>
  <div class="draw-area" ref="canvasWrapEl">
    <canvas id="canvas" width="960px" height="540px"></canvas>
    <div class="btn-wrap">
      <a-button class="btn" @click="handleCancel">取消</a-button>
      <a-button type="primary" class="btn" @click="saveDraw">确认保存</a-button>
      <a-button type="primary" class="btn" @click="clearDraw">清空</a-button>
    </div>
  </div>
</template>
<script>
  import { fabric } from "fabric"
  export default {
    props: ["sfimgsize", "sfimgurl"],
    data(){
      return {
        canvas: null,
        dtop: 0, 
        dleft: 0, 
        dw: 0, 
        dh: 0, 
        rect: null,
        pytop: 0, // 包裹层的偏移top - left
        pyleft: 0,
      };
    },
    mounted(){
      console.log('图片的真实像素:', this.sfimgsize)
      this.init()
      // 获取包裹元素的top-left 用于计算偏移
      this.getElTopLeft()
    },
    methods: {
      getElTopLeft() { // 获取偏移
        let el = this.$refs.canvasWrapEl
        let tl = el.getBoundingClientRect()
        console.log('el top-left:', tl)
        this.pytop = tl.top
        this.pyleft = tl.left
      },
      init() {
        let that = this
        that.canvas = new fabric.Canvas("canvas", {
          backgroundColor: "rgb(100,100,200)", // 画布背景色
          selectionColor: "rgba(255,255,255,0.3)", // 画布中鼠标框选背景色
          selectionLineWidth: 0, // 画布中鼠标框选边框
          // selection: false, // 在画布中鼠标是否可以框选 默认为true
        });
        // console.log('canvas obj:', that.canvas)
        fabric.Image.fromURL(that.sfimgurl,(img)=>{
          img.scale(1/2).set('left', 0).set('top', 0).set('selectable', false)
          that.canvas.add(img);
          that.startDraw()
        })
      },
      startDraw() {
        let that = this
        console.log('draw start')
        // 事件
        that.canvas.on('mouse:down', function(options) {
          console.log('mouse-down:', options.e.clientX, options.e.clientY);
          // 注意减去偏移量
          that.dleft = options.e.clientX - that.pyleft
          that.dtop = options.e.clientY - that.pytop
        });
        that.canvas.on('mouse:up', function(options) {
          console.log('mouse-up:', options.e.clientX, options.e.clientY);
          // 注意减去偏移量
          that.dw = options.e.clientX - that.dleft - that.pyleft
          that.dh = options.e.clientY - that.dtop - that.pytop
          that.rect = new fabric.Rect({
            top: that.dtop,
            left: that.dleft,
            width: that.dw,
            height: that.dh,
            fill: "rgba(255, 255, 255, 0)",
            stroke: 'red', // 边框原色
            strokeWidth: 2, // 边框大小
            // angle: 15,
            // selectable: false, // 是否允许当前对象被选中
            // hasRotatingPoint: false, // 取消旋转按钮？ 貌似不生效
            // mtr: false,  // 取消旋转按钮？ 貌似不生效
            lockRotation: true, // 不允许旋转
          });
          that.canvas.add(that.rect);
          that.stopDraw()
        });
      },
      stopDraw() {
        console.log('draw stop')
        this.canvas.off('mouse:down')
        this.canvas.off('mouse:up')
      },
      saveDraw() {
        if (this.rect) {
          // 这里的rectobj其实没什么用，保留它是留一个提醒，此时rectobj的数据是原始数据
          // 因为之前的4角坐标是通过rectobj自己计算的，如果进行了位移、缩放等操作
          // 数据在这里是错误的，因为它的数据经过实测后是鼠标抬起时的数据
          // 所以这里 需使用realpointsarr 
          let rectobj = {
            top: this.rect.get('top'),
            left: this.rect.get('left'),
            width: this.rect.get('width'),
            height: this.rect.get('height'),
            angle: this.rect.get('angle')
          }
          console.log('save rect-obj:', rectobj)
          let realpointsarr = this.rect.get('aCoords')
          console.log('text get data aCoords:', realpointsarr)

          // 计算像素比
          // 这里的canvas = 960 * 540
          let xratio = this.sfimgsize.width / 960
          let yratio = this.sfimgsize.height / 540
          console.log('x-y-ratio', xratio, yratio)
          // 计算真实的四角坐标， 注意图片的实际像素尺寸
          let arr = []
          let onepoint = [realpointsarr.tl.x, realpointsarr.tl.y]
          arr.push(onepoint)
          let twopoint = [realpointsarr.tr.x, realpointsarr.tr.y]
          arr.push(twopoint)
          let threepoint = [realpointsarr.br.x, realpointsarr.br.y]
          arr.push(threepoint)
          let fourpoint = [realpointsarr.bl.x, realpointsarr.bl.y]
          arr.push(fourpoint)
          let brr = []
          for (let i of arr) {
            let e = Math.ceil((i[0] * xratio))
            let f = Math.ceil((i[1] * yratio))
            brr.push([e, f])
          }
          console.log('坐标数据-转换后数据:', arr, brr)
          this.$emit('saverect', brr)
        } else {
          this.$emit('saverect', [])
        }
      },
      clearDraw() {
        if (this.rect) {
          console.log('clear rect here')
          this.canvas.remove(this.rect)
          this.rect = null
          this.startDraw()
        }
      },
      handleCancel() {
        this.$emit('cancel')
      }
    },
  };
</script>
<style scoped>
  .draw-area{
    width: 100%;
    /* height: 540px; */
    overflow: hidden;
  }
  .btn-wrap{
    width: 100%;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn {
    margin: 0 15px;
  }
</style>

这里遇到2个坑

• 由于底图在一个弹框中，所以鼠标绘制需要计算偏移量，实现方式在上面代码的startDraw()
• 通过fabricjs 的Object.get(property) 这个方法获取的是原始的框选数据，这里这么说是因为默认绘制的框是支持放大、缩小、旋转的，而要获取最终的框选数据需要使用aCoords属性，详见上面代码的saveDraw()

最终效果