开源可视化引擎 Meta2d.js 实战 - 属性设定

meta2d的 Pen 被称为图元，（个人比较习惯称为组件）有很多属性。有些属性对图形的形状产生影响，有些属性则能够控制图形的的外观表现样式。我习惯将这些属性分为3类：

1. 形状，与外在整体表现方面相关的属性，比如宽、高、旋转、进度等
2. 样式，与美化相关的属性，比如颜色、内外边距、背景图片、边框样式等
3. 文字，组件的label文字的设定，文字相关的字体、字号、颜色、对齐方式等。单独提取出来是因为更利于我们理解和使用。

一、基本形状

我将宽度、高度、旋转、组件的可见性等，视为基本形状范畴。

1、视频感受

2、属性设定方法: setValue

我们需要了解meta2d提供了设置pen对象属性值的方法: setValue，该方法由引擎对象实例提供。在我的一篇文章 开源可视化引擎 Meta2d.js 实战 - 实时数据通信逻辑分析与实现中已介绍，我们再来回顾其内容：

// core.js 中定义
setValue(data: IValue, { render, doEvent, history, }?: {
    render?: boolean;
    doEvent?: boolean;
    history?: boolean;
}): void;


// 来看IValue定义
export declare type IValue = Pen & Partial<ChartData> & Partial<Record<'tag' | 'newId', string>> & {
    [key: string]: any;
};

需要重点了解这3个参数：

2.1 data

参数data，代表数据对象本身，也就是Pen对象。其中必须包含id或者tag属性，以便引擎确定更新的是哪个pen。假如我们要设定pen的宽度为120，data对象应该这样定义：

{
    id: 'pen的id',
    width: 120    // 要设定的新值
}

2.2 render

render参数，表示如果你更新完成组件的属性值后，是否需要再更新canvas视图。通常建议，如果更新单个属性，则设定为true；如果一次性更新多个属性，则设定为false。在更新完成所有属性后。再调用核心api的render方法，集中一次更新视图。

2.3 history

history参数，代表了你在调用setValue方法时，是否需要放入操作的历史记录中去。设定为true，则meta2d则会记录此次操作的前后结果，从而支持我们调用核心库的回退、重做的功能api，来让canvas在界面上对用户的操作进行回退、重做的响应。

3、部分属性说明

3.1 基本属性

1. 宽度 width
2. 高度 height
3. 旋转 rotate
4. 是否可见 visible

3.2 进度相关

1. 百分比 progress
2. 颜色 progressColor
3. 是否垂直显示 verticalProgress

二、样式

1、视频感受

2、属性说明

pen的类型，被分为2类：线条类型和图形类型

2.1 图形类型的样式相关的部分属性

1. 边框宽度 lineWidth
2. 边框圆角 borderRadius
3. 边框线条类型 lineDash
4. 内边距 paddingTop/paddingBottom/paddingLeft/paddingRight
5. 颜色 color
6. 填充色 background
7. 背景图片 image

2.2 线条类型的部分样式属性

1. 线粗细 lineWidth
2. 线颜色 color
3. 边框宽度 borderWidth，在meta2d中，线条也是有边框的。这是为了支持线条的动画表现。
4. 边框颜色 borderColor
5. 线条类型 lineDash
6. 弯曲类型 lineName
7. 起点形状 fromArrow
8. 终点形状 toArrow

三、文字

1、视频感受

2、属性说明

1. 文字内容 text
2. 显示文字 hiddenText
3. 字号 fontSize
4. 字体 fontFamily
5. 颜色 textColor
6. 背景色 textBackground
7. 水平对齐 textAlign
8. 垂直对齐 textBaseline
9. 左右偏移 textLeft
10. 上下偏移 textTop