可视化开发的心酸路之基础元素

时间 2020-01-23

标签可视化开发心酸基础元素栏目悠闲生活繁體版

原文原文链接

基础元素（图元）

范围

在第一篇中咱们经过思惟导图也简单介绍了图元的范围。sql

基础图形 - 点线面
基础图表 - echarts[折线图，饼图，柱状图，地图，散点图...]
媒体 - 视频，直播视频
表格
3d图形
行业组件
...

配置项

样式配置项
能够经过样式配置项，配置图元的基础样式属性，以下：

数据配置项
能够经过数据配置项，配置图元的数据，这里有个数据源的概念。
数据源指的就是获取数据的方式，能够经过一下的方式：api

静态的编辑器书写，
能够经过api，
能够经过sql，
...

图元属性

位置 - top,left
大小 - width,height
角度 - angle
名称 - partName
id - partId
图层 - layer
身份标示 - partType

基本就是以上的信息咱们从新梳理一下(x指left,y指top)：echarts

class Part {
    /**
     * 图形元素的名称
     */
    public partName: string = '';

    /**
     * 图形元素的id
     */
    public partId: string = '';

    /**
     * 图形的类型，好比part，component， template
     */
    public partType: string = '';

    /**
     * 第一级表示标识
     */
    public sourceType: string = '';

    /**
     * 第二级表示标识
     */
    public type: string = '';

    /**
     * 第三级表示标识
     */
    public childType: string = '';

    /**
     * 图形元素的图层
     */
    public layer: number = 0;
    
    /**
     * 基本的样式
     */
    public partStyle: PartStyle;
}

class PartStyle {
    /**
     * 图形元素的x坐标
     */
    public x: number;

    /**
     * 图形元素的y坐标
     */
    public y: number;

    /**
     * 图形元素的宽度
     */
    public width: number;

    /**
     * 图形元素的高度
     */
    public height: number;

    /**
     * 图形元素的角度
     */
    public angle: number;

    /**
     * 图形元素的背景颜色
     */
    public backgroundColor: string;

    /**
     * 图形元素的透明度
     * 1~100
     */
    public opacity: number;
}

图元函数（方法）

生命周期

图元是一个完整的实例类，因此它是一个有生命的个体，因此咱们须要为它定制生命周期，以抽象的形式展现
初始化实例对象
发生在建立实例的时候，好比从菜单拖拽出一个图元dom

销毁实例对象编辑器

export abstract class LifeCircle {
    /**
     * 初始化类对象
     */
    abstract init(domId: string, opts?: any): void;

    /**
     * 销毁类对象
     */
    abstract destroyed(): void;
}

通用的方法钩子

这里面我是用ts写的，大概能够总结为如下几个方法函数

数据存储和读取

保存图元数据，获取图元数据数据，发生在保存和初始化的状况

获取类对象纯属性 - getPartAllProps
设置类对象纯属性 - setPartAllProps

样式配置

设置样式配置项
公共的样式配置项指的是大小，坐标，图层等
私有的样式配置项指的是echarts的系列，xy轴等

获取类对象公共样式 - setPublicStyle
设置类对象私有样式 - setShapeStyle(setPrivateStyle)

数据配置

设置数据配置项
调用设置静态数据，这里补充一点无论是什么数据源，最终拿到的都是静态数据，因此只有一个设置静态数据的方法

获取类对象静态数据 - setStaticData

事件配置

设置事件配置项
公共的事件配置项指的是图元间的传参等
私有的事件配置项指的是图元内部的事件等

获取类对象公共事件 - setPublicPartEvent
设置类对象私有事件 - setPrivatePartEvent

动画配置

设置动画配置项
内置动画配置项指的是图元内部的动画，好比echarts的tooltip显示等
外部动画配置项指的是图元外部渐变显示和隐藏等

获取类对象外部动画 - setOuterAnimation
设置类对象内置动画 - setInnerAnimation

export abstract class AbstractPart extends LifeCircle {
    /**
     * 获取类对象纯属性
     */
    public abstract getPartAllProps(): Model.Part;

    /**
     * 设置类对象纯属性
     */
    public abstract setPartAllProps(partType: any): void;

    /**
     * 设置公共和私有的实例样式属性
     */
    public abstract setPublicStyle(option: any): void;
    public abstract setPrivateStyle(option: any): void;
    
    /**
     * 设置静态数据
     */
    public abstract setStaticData(option: any): void;
    
    /**
     * 设置实例的事件
     */
    public abstract setPublicPartEvent(): void;
    public abstract setPrivatePartEvent(): void;

    /**
     * 设置实例内置的动画
     */
    public abstract setInnerAnimation(): void;

    /**
     * 设置实例外置的动画
     */
    public abstract setOuterAnimation(): void;
}

下一章节，咱们将介绍如何去设计一个可以实例化图元的大体流程动画

可视化开发的心酸路 之 基础元素