鼠标移动框选动态绘制图形，基于zrender

本文只介绍根据鼠标事件动态绘制矩形方法
zrender实现简易画板功能可绘制大部分常用图形在文章末尾可参考

像下图这样，可随心所欲绘制你想绘制的矩形：

完整代码：（有详细注释，有任何疑问欢迎留言）

<template>
  <div class="zrender">
    <div id="zrender-canvas"></div>
  </div>
</template>

<script>
import zrender from 'zrender'
export default {
  name: 'zrender',
  data() {
    return {
      zr: null,
      group: null,
      currentId: null
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.zr = zrender.init(document.getElementById('zrender-canvas'))
      this.group = new zrender.Group()
      this.zr.add(this.gro