# Displayable 类

# 概述

继承与 Element 类

# 构造函数

# 原型字段

# type

图形的类型

# __dirty

是否需要更新

# invisible

图形是否不可见,为 true 时不绘制图形,但是仍能触发鼠标事件。

# z

控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低,而且不会创建新的 Canvas。

# z2

与 z 类似,优先级比 z 更低。

# zlevel

决定绘画在哪层 Canvas 中。Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的 zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

# draggable

图形是否可拖曳。

# dragging

是否在拖动中

# silent

静默,不响应事件

# culling

是否进行裁剪

# cursor

鼠标移到元素上时的鼠标样式。

# rectHover

是否使用包围盒检验鼠标是否移动到物体。false 则检测元素实际的内容。

# progressive

是否渐进式渲染。当图形元素过多时才使用,用大于 0 的数字表示渲染顺序。

# incremental

IncrementalDisplayable 特有属性

# globalScaleRatio

# 原型方法

# beforeBrush

绘制之前的钩子函数,会将 ctx 传递出来,可以修改或使用上下文

# afterBrush

绘制之后的钩子函数,会将 ctx 传递出来,可以修改或使用上下文

# brush

绘制元素, 抽象方法,由派生类实现

# getBoundingRect

得到元素的包围盒,抽象方法,由派生类实现

# contain

判断坐标 (x, y) 是否在图形上。

# traverse

深度优先遍历所有子孙节点, 到了元素这里,只能执行自身了

# rectContain

判断坐标 (x, y) 是否在图形包围盒内。

rectContain: function (x, y) {
    var coord = this.transformCoordToLocal(x, y);
    var rect = this.getBoundingRect();
    return rect.contain(coord[0], coord[1]);
}

# dirty

设置需要更新,如果已经加入到 zrender 实例中,将调用 zrender 的 refresh 方法。

dirty: function () {
    this.__dirty = this.__dirtyText = true;
    this._rect = null;
    this.__zr && this.__zr.refresh();
}

# animateStyle

animate('style') 的别名

animateStyle: function (loop) {
    return this.animate('style', loop);
}

# attrKV

Element 中会被 attr 方法调用。在这里重写了,区分了 style

attrKV: function (key, value) {
    if (key !== 'style') {
        Element.prototype.attrKV.call(this, key, value);
    }
    else {
        this.style.set(value);
    }
}

# setStyle

设置样式,但不触发更新,一般用于创建新的 Element

setStyle: function (key, value) {
    this.style.set(key, value);
    this.dirty(false);
    return this;
}

# useStyle

useStyle: function (obj) {
    this.style = new Style(obj, this);
    this.dirty(false);
    return this;
}

# calculateTextPosition