今天是想看看使用zrender框架如何去，画一个圆，再加“circle”的文字在圆心。
然后开始代码：
如何部署代码，让zrender跑起来这边就不说了，官方例子就有写，地址是：
准备工作如下：
dom中新建一个容器用于绘图：
然后直接写代码就可以了。
调用zrender的init接口初始化
// zrender_demo.htmlvar zr = zrender.init(document.getElementById('main')); 进入init方法，发现做2件事情：A、初始化ZRender；B、将其存入ZRender实例map索引
/** * zrender初始化 * 不让外部直接new ZRender实例，为啥？ * 不为啥，提供全局可控同时减少全局污染和降低命名冲突的风险！ * * @param {HTMLElement} dom dom对象，不帮你做document.getElementById了 * @param {Object=} params 个性化参数，如自定义shape集合，带进来就好 * * @return {ZRender} ZRender实例 */zrender.init = function(dom, params) { var zi = new ZRender(guid(), dom, params || {}); _instances[zi.id] = zi; return zi;}; 其中guid()是zrender统一的ID生成机制，通过esl加载，然后按需调用：
// zrender.jsvar guid = require('./tool/guid');guid();// tool/guid.js/** * zrender: 生成唯一id * * @author errorrik (errorrik@gmail.com) */define( function() { var idStart = 0x0907; return function () { return 'zrender__' + (idStart++); }; }); 进入ZRender接口类，这边体现官网提到的“MVC核心封装实现图形仓库、视图渲染和交互控制”
-
Stroage(M) : shape数据CURD管理
-
Painter(V) : canvas元素生命周期管理，视图渲染，绘画，更新控制
-
Handler(C) : 事件交互处理，实现完整dom事件模拟封装
/** * ZRender接口类，对外可用的所有接口都在这里！！ * storage（M）、painter（V）、handler（C）为内部私有类，外部接口不可见 * 非get接口统一返回支持链式调用~ * * @param {string} id 唯一标识 * @param {HTMLElement} dom dom对象，不帮你做document.getElementById * * @return {ZRender} ZRender实例 */function ZRender(id, dom) { this.id = id; this.env = require('./tool/env'); this.storage = new Storage(); this.painter = new Painter(dom, this.storage); this.handler = new Handler(dom, this.storage, this.painter); // 动画控制 this.animatingShapes = []; this.animation = new Animation({ stage : { update : getAnimationUpdater(this) } }); this.animation.start();} 这边Storage、Painter、Handler、animation的初始化暂时不细究跳过
好习惯是每次绘图前，都清空画布
// zrender_demo.htmlzr.clear();
zrender执行清空时，清空storage后，再执行painter的clear()方法
// zrender.js/** * 清除当前ZRender下所有类图的数据和显示，clear后MVC和已绑定事件均还存在在，ZRender可用 */ZRender.prototype.clear = function () { this.storage.del(); this.painter.clear(); return this;}; 同样暂不细究storage、painter的清除机制
接下来开始绘图，添加一个圆形
// zrender_demo.htmlvar color = require('zrender/tool/color');var colorIdx = 0;var width = Math.ceil(zr.getWidth()); // 视图宽度var height = Math.ceil(zr.getHeight()); // 视图高度 F11查看getWidth()，调用painter的方法。getHeight类似实现
// zrender.js/** * 获取视图宽度 */ZRender.prototype.getWidth = function() { return this.painter.getWidth();}; // zrender_demo.htmlvar circle = new CircleShape({ style : { x : 100, y : 100, r : 50, brushType : 'both', color : 'rgba(220, 20, 60, 0.8)', // rgba supported strokeColor : color.getColor(colorIdx++), // getColor from default palette lineWidth : 5, text :'circle', textPosition :'inside' }, hoverable : true, // default true draggable : true, // default false clickable : true, // default false // 可自带任何有效自定义属性 _name : 'Hello~', onclick: function(params){ alert(params.target._name); }, // 响应事件并动态修改图形元素 onmousewheel: function(params){ var eventTool = require('zrender/tool/event'); var delta = eventTool.getDelta(params.event); var r = params.target.style.r; r += (delta > 0 ? 1 : -1) * 10; if (r < 10) { r = 10; }; zr.modShape(params.target.id, {style: {r: r}}) zr.refresh(); eventTool.stop(params.event); }}); 初始化圆Circle，直接调用基类
// shape/circle.jsfunction Circle(options) { Base.call(this, options);} base中先对各属性进行默认值初始化，而后使用传入值覆盖
// shape/base.jsfunction Base( options ) { this.id = options.id || guid(); this.zlevel = 0; this.draggable = false; this.clickable = false; this.hoverable = true; this.position = [0, 0]; this.rotation = [0, 0, 0]; this.scale = [1, 1, 0, 0]; for ( var key in options ) { this[ key ] = options[ key ]; } this.style = this.style || {};} 往storage中添加图形形状
// zrender_demo.htmlzr.addShape(circle);
// zrender.js/** * 添加图形形状 * * @param {Object} shape 形状对象，可用属性全集，详见各shape */ZRender.prototype.addShape = function (shape) { this.storage.add(shape); return this;}; 执行绘图
// zrender_demo.htmlzr.render();
zrender直接调用painter接口渲染
// zrender.js /** * 渲染 * * @param {Function} callback 渲染结束后回调函数 * todo:增加缓动函数 */ZRender.prototype.render = function (callback) { this.painter.render(callback); return this;}; Storage、 Painter、handler等未完待续。