canvas在图片上绘制标记，可拖拽、缩放，基于ZRender

如下图所示，在图片上做标记，如圆形、矩形等。

该demo实现画布在页面布局中缩放后居中显示，可拖拽、缩放、做标记说明。

项目下载地址：https://gitlab.com/zhangcw66/draw_mark

如粘贴以下代码，请安装zrender

<template>
<div class="draw-mark">
  <div id="canvas" style="height:710px;background-color:#F5F5F5"></div>
</div>
</template>

<script>
import zrender from 'zrender'
export default {
   
  name: 'DrawMark',
  data() {
   
    return {
   
      imgSrc: require('@/assets/timg.jpg'),
      markInfo: [[440, 260],[590, 360],[770, 370]],
      isShowPoint: true,

      zr: {
   },
      // zrender group实例
      group: {
   },
      imgWidth: 0, // 大图宽度
      imgHeight: 0, // 大图高度
      whRatio: 0, // 大图比例
      frameScale: 0, // 缩放比
      subSet: [], // 存放已经绘画完成的矩形框信息
      circle: {
   },
      scale: 1,
      scaleMax: 15, // 最大比例
      scaleMin: 0.5 // 最小比例
    }
  },
  mounted() {
   
    this.initCanvas()
  },
  methods: {
   
    // 初始化画布绘制图片
    initCanvas() {
   
      const vm = this
      // 获取放置画布的元素
      const container = document.getElementById('canvas')
      // 初始化zr实例 zrender容器
      vm.zr = zrender.init(container)
      vm.group = new zrender.Group({
   
        slient: true // 组内子孙元素是否响应鼠标事件
      })
      // 创建图片对象
      const imgs = new Image()
      // 图片的src等于大图的地址
      imgs.crossOrigin = 'Anonymous'
      imgs.setAttribute('crossOrigin', 'Anonymous')
      imgs.src = this.imgSrc
      imgs.onerror = _ => {
   
        this.$message.error('图片加载失败！')
        return<