zrender源码学习笔记（二）：认识storage

本文学习zrender较为简单的模块：数据层Storage，该模块的实现主要在Storage.ts中；并且整理了基本绘制图形。

Storage

首先看一下Storage结构：

export default class Storage {
    /* 存储根结点中所有元素，包括Displayable(图形)和Group(组/容器) */
    private _roots: Element[] = []
    /* 绘制队列：绘制用，包含所有需要绘制的图形：1. _roots中的Displayable(图形)，2. 深度遍历Group(组)，包含了Group中的图形 */
    private _displayList: Displayable[] = []
    /* 绘制队列长度 */
    private _displayListLen = 0

    /**
     * 获取绘制队列
     *
     * @param {boolean} 是否需要更新绘制队列
     * @param {DisplayParams} 是否包含忽视的元素
     * @return {Displayable[]} 绘制队列
     */
    getDisplayList(update?: boolean, includeIgnore?: boolean): Displayable[];
  
    /**
     * 更新图形的绘制队列。
     * 遍历_roots
     * 每次绘制前都会调用，该方法会先深度优先遍历整个树，更新所有Group和Shape的变换并且把所有可见的Shape保存到数组中，
     * 最后根据绘制的优先级（zlevel > z > 插入顺序）排序得到绘制队列
     */
    updateDisplayList(includeIgnore?: boolean);

    /**
     * 将元素(Element)添加到绘制队列
     * 1. 若元素为图形(Displayable)，则直接添加 
     * 2. 若元素为组(Group)，则深度遍历组中的孩子节点，将其中图形元素添加至绘制队列
     * clipPaths和动画有关，暂不考虑
     */
    private _updateAndAddDisplayable(el: Element, clipPaths: Path[], includeIgnore?: boolean)

    /**
     * 将图形(Displayable)或者组(Group)添加到根节点
     */
    addRoot(el: Element)

    /**
     * 删除指定的图形(Displayable)或者组(Group)
     * @param el
     */
    delRoot(el: Element | Element[])
    /* 删除根结点所有元素 */
    delAllRoots() 
    /* 获取根结点所有元素 */
    getRoots() 

    /**
     * 清空并且释放Storage
     */
    dispose() 

    /* 图形排序方法 */
    displayableSortFunc = shapeCompareFunc
}

storage有2大功能：

1. 存储图形元素：存储在_roots中，并通过addRoot(), delRoot(), delAllRoots(), getRoots()增删查
2. 获取绘制列表：_displayList存储绘制队列，_displayListLen表示绘制队列长度

3个有关更新获取绘制队列的方法：getDisplayList, updateDisplayList和_updateAndAddDisplayable，关系如下：

由上图我们大致也能看出zrender更新绘制队列的流程：

1. updateDisplayList中，遍历_root中每个节点，通过_updateAndAddDisplayable将元素添加到绘制队列中

2. _updateAndAddDisplayable接收Element类型元素，将元素添加至绘制队列：

   1. 依次调用元素的生命周期：beforeUpdate(), update(), afterUpdate()
   2. 若元素是Displayable类型，则将其直接加入绘制队列
   3. 若元素是Group类型，则遍历元素的孩子节点，递归调用_updateAndAddDisplayable方法，将其添加到绘制队列。

3. 通过timsort方法会绘制队列排序

timsort方法排序：对绘制列表排序按所在图层排序，图层低的在前面。

Element

以下整理了以Element为基类的所有图形树形图

1. Displayable表示可绘制图形，其中Path，TSpan，ZRImage是绘制图形的基本单位；Group表示一个容器，可用来绘制复杂图形，Group也是由Displayable组成的。

2. Displayable可绘制图形大致分为

   1. Path：由线条组成的图形，大致类型分为几何图形Shapes、简单图形组合CompoundPath

   2. TSpan：文字

   3. ZRImage：图片

   4. ZRText：文字容器，具有容器Group的属性，可以有孩子节点，孩子节点类型可以是：ZRImage，Rect，TSpan。