zrender在vue项目中的基本运用

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

首先保证项目已经下载了zrender包，npm install zrender
引入zrender import zrender from 'zrender'
html结构里放置一个绘图容器

只需这三步，准备就绪，在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里
      this.group.add(circle)
    }

没错，就这样已经成功绘制出如下丑陋的圆

完整代码如下：

如下图简易画板功能可绘制大部分漂亮的图形，可保存图片到本地

参考：https://gitlab.com/zhangcw66/draw_board
说明：画板功能并不严谨，可参考学习绘图，不建议实际使用