ZRender源码分析3：Painter(View层)-上

function Painter(root,stroage) {
	this.root = xxxx;
}

Painter.prototype.render = function () {};
Painter.prototype.refresh = function () {};
Painter.prototype.update = function () {};
Painter.prototype.clear = function () {};
.....

 /**
 * 创建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;
}

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

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

    var domRoot = document.createElement('div');
    this._domRoot = domRoot;

    //domRoot.onselectstart = returnFalse; // 避免页面选中的尴尬
    domRoot.style.position = 'relative';
    domRoot.style.overflow = 'hidden';
    domRoot.style.width = this._width + 'px';
    domRoot.style.height = this._height + 'px';
    root.appendChild(domRoot);

    this._domList = {};       //canvas dom元素
    this._ctxList = {};       //canvas 2D context对象，与domList对应
    this._domListBack = {};
    this._ctxListBack = {};
    
   
    this._zLevelConfig = {}; // 每个zLevel 的配置，@config clearColor
    this._maxZlevel = storage.getMaxZlevel(); //最大zlevel，缓存记录
    // this._loadingTimer 

    this._loadingEffect = new BaseLoadingEffect({});
    this.shapeToImage = this._createShapeToImageProcessor();

    // 创建各层canvas
    // 背景
    this._domList.bg = createDom('bg', 'div', this);
    domRoot.appendChild(this._domList.bg);

    var canvasElem;
    var canvasCtx;

    /**
     * 每一个level，就是一个canvas
     *
     * DOM结构
     * root
     *   ->domRoot
     *       ->canvas level1
     *       ->canvas level2
     *       ->canvas level3
     *       ->canvas hover_level
     *
     * _domList保存所有的DOM引用
     * {
     *      1:CanvasHTMLElement
     *      2:CanvasHTMLElement
     *      3:CanvasHTMLElement
     *      hover:CanvasHTMLElement
     * }
     *
     * ctxList保存所有的canvas.getContext('2d')引用
     * {
     *      1:CanvasContext
     *      2:CanvasContext
     *      3:CanvasContext
     *      hover:CanvasContext
     * }
     */

    // 实体
    for (var i = 0; i <= this._maxZlevel; i++) {
        canvasElem = createDom(i, 'canvas', this);
        domRoot.appendChild(canvasElem);
        this._domList[i] = canvasElem;
        vmlCanvasManager && vmlCanvasManager.initElement(canvasElem); // excanvas method

        this._ctxList[i] = canvasCtx = canvasElem.getContext('2d');
        if (devicePixelRatio != 1) { 
            canvasCtx.scale(devicePixelRatio, devicePixelRatio);
        }
    }

    // 高亮
    canvasElem = createDom('hover', 'canvas', this);
    canvasElem.id = '_zrender_hover_';
    domRoot.appendChild(canvasElem);
    this._domList.hover = canvasElem;
    vmlCanvasManager && vmlCanvasManager.initElement(canvasElem); // excanvas method
    this._domList.hover.onselectstart = returnFalse;
    this._ctxList.hover = canvasCtx = canvasElem.getContext('2d');
    if (devicePixelRatio != 1) { //处理视网膜
        canvasCtx.scale(devicePixelRatio, devicePixelRatio);
    }
}


Painter.prototype._getWidth = function() {
    var root = this.root;
    var stl = root.currentStyle
              || document.defaultView.getComputedStyle(root);

    return ((root.clientWidth || parseInt(stl.width, 10))
            - parseInt(stl.paddingLeft, 10) // 请原谅我这比较粗暴
            - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;

    /**
     * 这里用实际的width减去了左右的padding
     * 为什么不考虑将这两个方法就行重载？
     */
};

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;
};

/**
 * 构造类继承关系
 * 
 * @param {Function} clazz 源类
 * @param {Function} baseClazz 基类
 */
function inherits(clazz, baseClazz) {
    var clazzPrototype = clazz.prototype;
    function F() {}
    F.prototype = baseClazz.prototype;
    clazz.prototype = new F();

    for (var prop in clazzPrototype) {
        clazz.prototype[prop] = clazzPrototype[prop];
    }
    clazz.constructor = clazz;
}