zrender在vue项目中的基本运用

本文只介绍zrender最简单的引入和绘制圆形方法
zrender实现简易画板功能在文章末尾可参考

首先保证项目已经下载了zrender包，npm install zrender
引入zrender import zrender from 'zrender'
html结构里放置一个绘图容器 <div id="canvas"></div>
只需这三步，准备就绪，在mounted里执行

this.zr = zrender.init(document.getElementById('canvas'))
this.group = new zrender.Group()
this.zr.add(this.group)

就这样，画布已经创建成功，并且已经添加了放置所有你想画图形的group,验证一下
画个圆，在任何想绘制圆的地方调用此函数即可（代码如下）

drawCircle() {
      // 创建一个圆circle
      let circle = new zrender.Circle({
        shape: {
          cx: 300, // 圆心x坐标
          cy: 300, // 圆心y坐标
          r: 50 // 圆的半径
        },
        style: {
          fill: 'transparent', // 填充颜色，默认#000
          stroke: '#000', // 描边颜色，默认null
          lineWidth: 2 // 线宽， 默认1
        }
      })
      // 添加圆到group里