vue+canvas拖拽图形+按钮盒子跟随

<template>

  <div class="main">

    <canvas

      ref="myCanvas"

      id="myCanvas"

      width="500px"

      height="300px"

      style="background: black"

      @mousedown="canvasMouseDown"

      @mousemove="canvasMouseMove"

      @mouseup="canvasMouseUp"

    ></canvas>

    <div ref="saveButton" class="saveButton"></div>

  </div>

</template>

 

<script>

export default {

  name: '',

  data () {

    return {

      oCanvas: null,

      ctx: null,

      oShape: null,

      bDrawState: false, // 绘制状态默认false

      bDragState: false // 拖拽状态默认true

    }

  },

  created () {},

  computed: {},

  methods: {

    init () {

      this.oCanvas = this.$refs.myCanvas

      this.ctx = this.oCanvas.getContext('2d')

    },

    //  鼠标在canvas上按下事件

    canvasMouseDown (e) {

      const m