zrender源码分析3--初始化Painter绘图模块

接上次分析到初始化ZRender的源码，这次关注绘图模块Painter的初始化

入口1：new Painter(dom, this.storage);

// zrender.js
/**
* 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();
}

初始化Painter时，传入绘图区域dom、内容仓库实例storage。

并立即备份。

// Painter.js
/**
* 绘图类 (V)
*
* @param {HTMLElement} root 绘图区域
* @param {storage} storage Storage实例
*/
function Painter(root, storage) {
this.root = root;
this.storage = storage;
//......
}

这时的storage还是全空的。

还是好习惯，绘图前清空画布

// Painter.js  Painter

root.innerHTML = '';
this._width = this._getWidth(); // 宽，缓存记录
this._height = this._getHeight(); // 高，缓存记录

解决获取宽、高的浏览器兼容问题：

Painter.prototype._getHeight = function () {
var root = this.root;
var stl = root.currentStyle
|| document.defaultView.getComputedStyle(root);
return ((root.clientHeight || parseInt(stl.height, 10))
- parseInt(stl.paddingTop, 10) // 请原谅我这比较粗暴
- parseInt(stl.paddingBottom, 10)).toFixed(0) - 0;
};

新建DIV,设置默认属性并拼接

var domRoot = document.createElement('div');
this._domRoot = domRoot;
domRoot.style.position = 'relative';
domRoot.style.overflow = 'hidden';
domRoot.style.width = this._width + 'px';
domRoot.style.height = this._height + 'px';
root.appendChild(domRoot);

这时看dom。容器中，已经添加了包裹的div：

然后开始初始化缓存dom、画布的容器：

this._domList = {};       //canvas dom元素，都缓存到这里
this._ctxList = {};       //canvas 2D context对象，与domList对应
this._domListBack = {};
this._ctxListBack = {};

this._zLevelConfig = {}; // 每个zLevel 的配置，@config clearColor

通过storage获取最大的zlevel

this._maxZlevel = storage.getMaxZlevel(); //最大zlevel，缓存记录

初始化图形加载效果，这边是全空的（参数是空的，方法也是空的），没什么好看

this._loadingEffect = new BaseLoadingEffect({});

// loadingEffect/Base.js
/**
* @constructor
*
* @param {Object} options 选项
* @param {color} options.backgroundColor 背景颜色
* @param {Object} options.textStyle 文字样式，同shape/text.style
* @param {number=} options.progress 进度参数，部分特效有用
* @param {Object=} options.effect 特效参数，部分特效有用
*
*     textStyle:{
*         textFont: 'normal 20px Arial' || {textFont}, //文本字体
*         color: {color}
*     }
* }
*/
function Base(options) {
this.setOptions(options);
}
Base.prototype.setOptions = function (options) {
this.options = options || {};
};

图形另存为图片方法。很高端的样子，晚点再看吧

this.shapeToImage = this._createShapeToImageProcessor();
Painter.prototype._createShapeToImageProcessor = function () {
if (vmlCanvasManager) {
return doNothing;
}
var painter = this;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var devicePixelRatio = window.devicePixelRatio || 1;

return function (id, e, width, height) {
return painter._shapeToImage(
id, e, width, height,
canvas, ctx, devicePixelRatio
);
};
};

准备工作做完了，开始创建各层canvas

首先创建背景

this._domList.bg = createDom('bg', 'div', this);
domRoot.appendChild(this._domList.bg);

先看下html dom中的情况吧，背景图层已经添加上去了：





再看看创建dom元素的createDom方法吧，高宽取决于父容器

/**
* 创建dom
*
* @inner
* @param {string} id dom id 待用
* @param {string} type dom type，such as canvas, div etc.
* @param {Painter} painter painter instance
*/
function createDom(id, type, painter) {
var newDom = document.createElement(type);
var width = painter._width;
var height = painter._height;
// 没append呢，请原谅我这样写，清晰~
newDom.style.position = 'absolute';
newDom.style.left = 0;
newDom.style.top = 0;
newDom.style.width = width + 'px';
newDom.style.height = height + 'px';
newDom.setAttribute('width', width * devicePixelRatio);
newDom.setAttribute('height', height * devicePixelRatio);
// id不作为索引用，避免可能造成的重名，定义为私有属性
newDom.setAttribute('data-zr-dom-id', id);
return newDom;
}

循环创建各层canvas，vmlCanvasManager是啥，得晚点细究，应该是IE下用的，这边一直为false。

这边_maxZlevel为0，只需要添加zlevel： 0画布就行（同时进行了缓存）。

var canvasElem;
var canvasCtx;
// 实体
for (var i = 0; i <= this._maxZlevel; i++) {
canvasElem = createDom(i, 'canvas', this);
domRoot.appendChild(canvasElem);
this._domList[i] = canvasElem;
vmlCanvasManager && vmlCanvasManager.initElement(canvasElem);
this._ctxList[i] = canvasCtx = canvasElem.getContext('2d');
if (devicePixelRatio != 1) {
canvasCtx.scale(devicePixelRatio, devicePixelRatio);
}
}

创建用于高亮的canvas，照样缓存。

canvasElem = createDom('hover', 'canvas', this);
canvasElem.id = '_zrender_hover_';
domRoot.appendChild(canvasElem);
this._domList.hover = canvasElem;
vmlCanvasManager && vmlCanvasManager.initElement(canvasElem);
this._domList.hover.onselectstart = returnFalse;
this._ctxList.hover = canvasCtx = canvasElem.getContext('2d');
if (devicePixelRatio != 1) {
canvasCtx.scale(devicePixelRatio, devicePixelRatio);
}

照例先看html dom吧：





我们来看看创建好的Painter实例



未完，待续：

zrender源码分析4--初始化Painter绘图模块2