boutique-books/b00-阅读笔记/zrender源码/z.md

zrender

概览

// 对外暴露一个对象
var zrender = {
    version: '4.0.7',
    init: function (dom, opts) {},
    dispose: function (zr) {},
    getInstance: function (id) {},
    registerPainter: function (name, Ctor) {}
    // ...... other interface：src/export.js
};

内部类

• ZRender

几个重要内部对象(类实例)

• Storage（M）
• Painter（V）
• Handler（C）
• Animation

src/core

arrayDiff.js

If x and y are strings, where length(x) = n and length(y) = m, the Needleman-Wunsch algorithm finds an optimal alignment in O(nm) time, using O(nm) space. Hirschberg's algorithm is a clever modification of the Needleman-Wunsch Algorithm which still takes O (nm) time, but needs only O(min{n,m}) space and is much faster in practice.

bbox.js

• 从顶点数组中计算出最小包围盒
• 从直线计算最小包围盒
• 从三阶贝塞尔曲线(p0, p1, p2, p3)中计算出最小包围盒（找极值点和始末点的包围盒）
• 从二阶贝塞尔曲线(p0, p1, p2)中计算出最小包围盒（找极值点和始末点的包围盒）
• 从圆弧中计算出最小包围盒

BoundingRect.js

属性：

• x
• y
• width
• heigth

方法：

• 合并
• 变换
• 相交
• 包含
• 克隆
• 复制
• 序列化

curve.js

计算二/三次方贝塞尔值

function quadraticAt(p0, p1, p2, t) {
    return (1 - t) * (1 - t) * p0 + 2 * (1 - t) * t * p1 + t * t * p2;
}

function cubicAt(p0, p1, p2, p3, t) {
    return (1 - t) * (1 - t) * (1 - t) * p0 + 3 * (1 - t) * (1 - t) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t * p3;
}

计算二/三次方贝塞尔导数值

function quadraticDerivativeAt(p0, p1, p2, t) {
    return 2 * ((1 - t) * (p1 - p0) + t * (p2 - p1));
}

function cubicDerivativeAt(p0, p1, p2, p3, t) {
    return 3 * ((1 - t) * (1 - t) * (p1 - p0) + 2 * (1 - t) * t * (p2 - p1) + t * t * (p3 - p2));
}

计算二/三次方贝塞尔方程根

盛金公式

计算二/三次贝塞尔方程极限值

//令导数值为零，求出对应的 t 值
function quadraticExtremum(p0, p1, p2) {
    var divider = p0 + p2 - 2 * p1;
    if (divider === 0) {
        // p1 is center of p0 and p2
        return 0.5;
    }
    else {
        return (p0 - p1) / divider;
    }
}

细分二/三次贝塞尔曲线（过细分点切线与始末切线的交点）

function quadraticSubdivide(p0, p1, p2, t, out) {
    var p01 = (p1 - p0) * t + p0;
    var p12 = (p2 - p1) * t + p1;
    var p012 = (p12 - p01) * t + p01;

    // seg0
    out[0] = p0;
    out[1] = p01;
    out[2] = p012;

    // seg1
    out[3] = p012;
    out[4] = p12;
    out[5] = p2;
}

投射点到二/三次贝塞尔曲线上，返回投射距离（一个或者多个，这里只返回其中距离最短的一个）。

根据已知点找曲线上离它最近的点

env.js

设备环境识别：Zepto.js

event.js

DOM事件和对象事件

clientToLocal

将鼠标事件坐标转换成canvas坐标。

e.offsetX/e.offsetY 相对于 padding box。

According to the W3C Working Draft, offsetX and offsetY should be relative to the padding edge of the target element. The only browser using this convention is IE. Webkit uses the border edge,Opera uses the content edge, and FireFox does not support the properties.(see http://www.jacklmoore.com/notes/mouse-position/).

addEventListener/removeEventListener

var isDomLevel2 = (typeof window !== 'undefined') && !!window.addEventListener;
export function addEventListener(el, name, handler) {
    if (isDomLevel2) {
        // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
        el.addEventListener(name, handler);
    }
    else {
        el.attachEvent('on' + name, handler);
    }
}

export function removeEventListener(el, name, handler) {
    if (isDomLevel2) {
        el.removeEventListener(name, handler);
    }
    else {
        el.detachEvent('on' + name, handler);
    }
}

stop event / event object

var stop = isDomLevel2
    ? function (e) {
        e.preventDefault();
        e.stopPropagation();
        e.cancelBubble = true;
    }
    : function (e) {
        e.returnValue = false;
        e.cancelBubble = true;
    };
var event = function(e) {
    return e || window.event;
}

fourPointsTransform.js

GestureMgr.js

guid.js

// zrender: 生成唯一id
var idStart = 0x0907;
export default function () {
    return idStart++;
}

log.js

var log = function () {
};

if (debugMode === 1) {
    log = function () {
        for (var k in arguments) {
            throw new Error(arguments[k]);
        }
    };
}
else if (debugMode > 1) {
    log = function () {
        for (var k in arguments) {
            console.log(arguments[k]);
        }
    };
}

LRU.js

doubly linked list.

linkedListProto.insertEntry = function (entry) {
    if (!this.head) {
        this.head = this.tail = entry;
    }
    else {
        this.tail.next = entry;
        entry.prev = this.tail;
        entry.next = null;
        this.tail = entry;
    }
    this._len++;
};
linkedListProto.remove = function (entry) {
    var prev = entry.prev;
    var next = entry.next;
    if (prev) {
        prev.next = next;
    }
    else {
        // Is head
        this.head = next;
    }
    if (next) {
        next.prev = prev;
    }
    else {
        // Is tail
        this.tail = prev;
    }
    entry.next = entry.prev = null;
    this._len--;
};

// O(1) remove operation.
// 空间换时间，将删除和查询操作优化到 O(1) 时间复杂度
var LRU = function (maxSize) {

    this._list = new LinkedList();

    this._map = {};

    this._maxSize = maxSize || 10;

    this._lastRemovedEntry = null;
};

var LRUProto = LRU.prototype;

/**
 * @param  {string} key
 * @param  {} value
 * @return {} Removed value
 */
LRUProto.put = function (key, value) {
    var list = this._list;
    var map = this._map;
    var removed = null;
    if (map[key] == null) {
        var len = list.len();
        // Reuse last removed entry
        var entry = this._lastRemovedEntry;
        // 超出长度，移除头部，尾部插入新节点
        if (len >= this._maxSize && len > 0) {
            // Remove the least recently used
            var leastUsedEntry = list.head;
            list.remove(leastUsedEntry);
            delete map[leastUsedEntry.key];

            removed = leastUsedEntry.value;
            this._lastRemovedEntry = leastUsedEntry;
        }

        if (entry) {
            entry.value = value;
        }
        else {
            entry = new Entry(value);
        }
        entry.key = key;
        list.insertEntry(entry);
        map[key] = entry;
    }

    return removed;
};

/**
 * @param  {string} key
 * @return {}
 */
LRUProto.get = function (key) {
    var entry = this._map[key];
    var list = this._list;
    if (entry != null) {
        // 最近访问的节点放到尾部
        // Put the latest used entry in the tail
        if (entry !== list.tail) {
            list.remove(entry);
            list.insertEntry(entry);
        }

        return entry.value;
    }
};