# Zrender 类

# 构造函数

# 参数

参数 类型 说明
id string 实例的ID
dom HTMLElement 要实例化的DOM元素
opts Object 配置项
opts.renderer string 渲染方式,支持:'canavs'、'svg'、'vml'
opts.devicePixelRatio number 画布大小与容器大小之比,仅当 renderer 为 'canvas' 时有效。
opts.width number|string 画布宽度,设为 'auto' 则根据 devicePixelRatio 与容器宽度自动计算
opts.height number|string 画布高度,设为 'auto' 则根据 devicePixelRatio 与容器宽度自动计算

# 代码

大概的流程

  • 实例化 Storage 类, 类似于贯穿几个类实例的上下文数据
  • 根据参数中的 renderder 来选择 painter, 默认的为 canvas
  • 实例化 handler(要先看下这个东西干什么的)
  • 实例化 Animation (利用 requestAnimationFrame 来监听浏览器重绘, 判断 zrender 中的状态,查看是否需要重绘)
  • 删除元素之前删除动画

# 原型链方法

# getId

获取实例ID

getId: function () {
    return this.id;
}

# add

添加元素

this.storage.addRoot(el);
this._needsRefresh = true;

会将元素添加到 storage 中,并且将 _needsRefresh 设置为 true

# remove

删除元素

this.storage.delRoot(el);
this._needsRefresh = true;

元素从 storage 中删除, 并且将 _needsRefresh 设置为 true

# configLayer

配置层属性,在做动画的时候可以实现模糊效果。 以 canvas 为例,一个 canvas 就是一个层;如果重绘前透明的颜色来填充 canvas ,将会形成拖影的效果。

configLayer: function (zLevel, config) {
    if (this.painter.configLayer) {
        this.painter.configLayer(zLevel, config);
    }
    this._needsRefresh = true;
}

# setBackgroundColor

设置层背景颜色

setBackgroundColor: function (backgroundColor) {
    if (this.painter.setBackgroundColor) {
        this.painter.setBackgroundColor(backgroundColor);
    }
    this._needsRefresh = true;
}

设置后, 将 _needsRefresh 设置为 true

# refreshImmediately

立即刷新, 不会等到浏览器的下一个刷新周期

按照理论,立即刷新不会有明显的效果

this._needsRefresh = this._needsRefreshHover = false;
this.painter.refresh();
this._needsRefresh = this._needsRefreshHover = false;

设置标记为刷新,然后调用 painter.refresh() 进行刷新

# refresh

在下一帧刷新

this._needsRefresh = true;

仅仅是将 _needsRefresh 设置为 true

# flush

立即触发 refresh 和 refreshHover 所标记的重绘操作。

会跟随 requestAnimationFrame 每一帧都会调用, 如果 _needsRefresh_needsRefreshHover 为真时,将会立即刷新,并且触发 rendered 事件

可以理解为, flush 为整个流程的入口, 在构造函数中 Animation 的参数就是 flush

this.animation = new Animation({
    stage: {
        update: zrUtil.bind(this.flush, this)
    }
});
flush: function () {
    var triggerRendered;

    if (this._needsRefresh) {
        triggerRendered = true;
        this.refreshImmediately();
    }
    if (this._needsRefreshHover) {
        triggerRendered = true;
        this.refreshHoverImmediately();
    }

    triggerRendered && this.trigger('rendered');
}

# addHover

将元素添加到高亮层,参数 el 为已有元素,只能修改 style 属性,其他的不能修改,如 shape

addHover: function (el, style) {
    if (this.painter.addHover) {
        var elMirror = this.painter.addHover(el, style);
        this.refreshHover();
        return elMirror;
    }
}

# removeHover

将元素从高亮层移除

removeHover: function (el) {
    if (this.painter.removeHover) {
        this.painter.removeHover(el);
        this.refreshHover();
    }
}

# clearHover

清除高亮层中所有的元素

clearHover: function () {
    if (this.painter.clearHover) {
        this.painter.clearHover();
        this.refreshHover();
    }
}

# refreshHover

刷新高亮层,将在下一个渲染帧的时候被刷新。

refreshHover: function () {
    this._needsRefreshHover = true;
}

# refreshHoverImmediately

强制立即刷新高亮层。

refreshHoverImmediately: function () {
    this._needsRefreshHover = false;
    this.painter.refreshHover && this.painter.refreshHover();
}

# resize

更新画布大小。当容器改变大小时,应调用此方法。

resize: function (opts) {
    opts = opts || {};
    this.painter.resize(opts.width, opts.height);
    this.handler.resize();
}

# clearAnimation

停止所有动画。

clearAnimation: function () {
    this.animation.clear();
}

# getWidth

获取画布宽度。

getWidth: function () {
    return this.painter.getWidth();
}

# getHeight

获取画布高度。

getHeight: function () {
    return this.painter.getHeight();
}

# pathToImage

path 对象 转换成 Image 对象,大量重复使用时可以提升性能

pathToImage: function (e, dpr) {
    return this.painter.pathToImage(e, dpr);
}

# setCursorStyle

设置缺省的鼠标样式

/**
 * Set default cursor
 * @param {string} [cursorStyle='default'] 例如 crosshair
 */
setCursorStyle: function (cursorStyle) {
    this.handler.setCursorStyle(cursorStyle);
}

# findHover

通过坐标查找高亮层元素

findHover: function (x, y) {
    return this.handler.findHover(x, y);
}

# on

绑定事件

on: function (eventName, eventHandler, context) {
    this.handler.on(eventName, eventHandler, context);
}

# off

解绑事件

off: function (eventName, eventHandler) {
    this.handler.off(eventName, eventHandler);
}

# trigger

触发事件

trigger: function (eventName, event) {
    this.handler.trigger(eventName, event);
}

# clear

清除所有对象和画布。

clear: function () {
    this.storage.delRoot();
    this.painter.clear();
}

# dispose

移除自身。当不再需要使用该实例时,调用该方法以释放内存。

dispose: function () {
    this.animation.stop();

    this.clear();
    this.storage.dispose();
    this.painter.dispose();
    this.handler.dispose();

    this.animation =
        this.storage =
        this.painter =
        this.handler = null;

    delInstance(this.id);
}