zrender是一个轻量级的Canvas类库,作为百度Echarts 3.0的底层基础。截至目前查看的zrender源码和文档,包括官网文档都还停留在2.x时代,我打算用一个系列介绍下zrender 3.x的使用和源码,一些demo和没有在博客中介绍的源码请进我的github仓库。
基于版本 3.2.2。
1.总体架构
官网上的一张图和解释。
MVC结构分别在Stroage.js,Painter.js,Handler.js文件下,我们稍后会详细解释,现在我们大概来看下它们分别的作用。
* Stroage(M) : shape数据CURD管理
* Painter(V) : canvase元素生命周期管理,视图渲染,绘画,更新控制
* Handler(C) : 事件交互处理,实现完整dom事件模拟封装
* shape : 图形实体,分而治之的图形策略,可定义扩展
* tool : 绘画扩展相关实用方法,工具及脚手架
* animation : 动画扩展,提供promise式的动画接口和常用缓动函数
源码结构
目录的介绍
- animation 动画有关;
- contain 包含判断;
- container Group.js 元素组的概念;
- core 核心代码,包含一些工具(util.js)、事件(event.js)、唯一ID(guid.js)、矩阵运算有关(matrix.js)等;
- dom HandleProxy.js dom事件有关;
- graphic 图形有关,shape文件夹下就是各个图形的js文件;
- mixin 混入模式要混入的函数;
- tool 工具函数,包括颜色工具(color.js),path工具(path.js)和转换工具(transformPath.js);
- vml IE中的画笔,[vml解释进入](http://www.g168.net/txt/vml/]
- 全局的文件
+ config.js 配置文件
+ Element.js 元素文件作为zrender最基本的元素
+ Handle.js C层,控制层
+ Layer.js 图层管理
+ Painter.js V层,视图层
+ Storage.js M层,数据管理层
+ zrender.js 入口
2.入口(zrender.js)
2.1 初始化
类似于jquery的无new化处理,init调用即可
调用:
var zr = zrender.init(document.getElementById('main'));
源码:
var instances = {}; // ZRender实例map索引
var zrender = {};
zrender.init = function(dom, opts) {
var zr = new ZRender(guid(), dom, opts);
instances[zr.id] = zr;
return zr;
};
2.2 构造函数
我们可以在构造函数中,看到MVC的管理机制。
var ZRender = function(id, dom, opts) {
opts = opts || {};
this.dom = dom;
this.id = id;
var self = this;
var storage = new Storage();
var rendererType = opts.renderer;
if (useVML) {
//IE中使用VML渲染
if (!painterCtors.vml) {
throw new Error('You need to require \'zrender/vml/vml\' to support IE8');
}
rendererType = 'vml';
} else if (!rendererType || !painterCtors[rendererType]) {
rendererType = 'canvas';
}
var painter = new painterCtors[rendererType](dom, storage,