# 项目入口
# 1.简单案例
import zrender from "zrender"
var zr = zrender.init(xxx)
var circle = new zrender.Circle(xxx)
zr.add(circle)
1
2
3
4
2
3
4
可以看到使用 zrender 步骤:
- 引入资源
- 初始化 zrender
- 实例化相关图形
- 将图形添加到 zrender 中
# 2.zrender
引入 zrender 时在源码内部会生成 zrender 类,原型上添加相关方法和属性
# 3.init
zrender 是基于 MVC 模式的整体架构,M 用 Storage 类表示,V 用 Painter 类表示,C 用 Handler 类表示,初始化时会实例化各类,通过 Handler 类将三者组合在一起
# 4.shape
内部定义一些形状的模板,通过修改简单的参数可以具体为一个图形(类似用虚拟 node 描述真实 node)
# 5.add
内部会触发刷新绘图,从而使页面显示图形