# Element 类

# 概述

元素,可以被添加到场景中。可以进行变换(Transformable)、支持动画(Animatable),支持事件(Eventful

# 关系

# 继承

# Transformable

可以进行变换

# Eventful

支持事件

# Animatable

支持动画

# 构造函数

除了继承以上类外,构造函数只会增加一个ID

# 原型字段

# type

元素类型

# name

元素名字

# __zr

ZRender 实例对象,会在 element 添加到 zrender 实例中后自动赋值

# ignore

图形是否忽略,为true时忽略图形的绘制以及事件触发

# clipPath

用于裁剪的路径(shape),所有 Group 内的路径在绘制时都会被这个路径裁剪

该路径会继承被裁减对象的变换

# isGroup

是否是 Group

# 原型方法

# drift

漂移,在拖动的时候更新位置

drift: function (dx, dy) {
    switch (this.draggable) {
        case 'horizontal':
            dy = 0;
            break;
        case 'vertical':
            dx = 0;
            break;
    }

    var m = this.transform;
    if (!m) {
        m = this.transform = [1, 0, 0, 1, 0, 0];
    }
    m[4] += dx;
    m[5] += dy;

    this.decomposeTransform();
    this.dirty(false);
}

# beforeUpdate

元素更新前的回调函数

# afterUpdate

元素更新后的回调函数

# update

更新变换, 在更新的时候每一帧都需要调用

update: function () {
    this.updateTransform();
}

# traverse

深度优先遍历所有子孙节点, group 和 displayable 的处理方式不同

# attrKV

# hide

隐藏当前元素

hide: function () {
    this.ignore = true;
    this.__zr && this.__zr.refresh();
}

# show

显示当前元素

show: function () {
    this.ignore = false;
    this.__zr && this.__zr.refresh();
}

# attr

设置元素属性。需要注意的是,应该始终调用该方法来修改属性,而不是直接 element.xxx = ... 这样的形式,因为后者不会重绘物体。

# setClipPath

设置裁剪元素,超出 clipPath 区域的部分将被裁剪掉。

一个元素只能被一个元素裁剪,如果要实现多个元素的裁剪,需要使用 zrender.CompoundPath。

# removeClipPath

取消设置裁剪元素。

# addSelfToZr

# removeSelfFromZr