zrender源码分析--初探如何画一个圆

今天是想看看使用zrender框架如何去，画一个圆，再加“circle”的文字在圆心。

然后开始代码：

如何部署代码，让zrender跑起来这边就不说了，官方例子就有写，地址是：https://github.com/ecomfe/zrender

准备工作如下：

dom中新建一个容器用于绘图：

然后直接写代码就可以了。

调用zrender的init接口初始化

// zrender_demo.html
var 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.js
var 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.html
zr.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.html
var 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.html
var 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.js
function Circle(options) {
 Base.call(this, options);
}

base中先对各属性进行默认值初始化，而后使用传入值覆盖

// shape/base.js
function 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.html
zr.addShape(circle);

// zrender.js
/**
 * 添加图形形状
 * 
 * @param {Object} shape 形状对象，可用属性全集，详见各shape
 */
ZRender.prototype.addShape = function (shape) {
	this.storage.add(shape);
	return this;
};

执行绘图

// zrender_demo.html
zr.render();

zrender直接调用painter接口渲染

// zrender.js 
/**
 * 渲染
 * 
 * @param {Function} callback  渲染结束后回调函数
 * todo:增加缓动函数
 */
ZRender.prototype.render = function (callback) {
	this.painter.render(callback);
	return this;
};

Storage、 Painter、handler等未完待续。