基础操作：拓扑连线以及矩形文字位置

1. 拓扑图连线

效果参见图纸demo示例：

Bash displays/demo/Demos/basic/edgetype.json

实现步骤如下：

• 点击工具栏连线，依次在图纸中选中两个图元，即可完成基本连线

 

• 选中线条配置连线类型，比如"ortho"

• 配置连线的两端箭头样式，在“图标集”属性中

 

JSON {   "symbols/demo/basic/fromArrow.json": {     "position": 15,     "keepOrien": true,     "width": 30,     "height": 15,     "names": [       "symbols/demo/basic/fromArrow.json"     ]   },   "symbols/demo/basic/toArrow.json": {     "position": 19,     "keepOrien": true,     "width": 30,     "height": 15,     "names": [       "symbols/demo/basic/toArrow.json"     ]   } }

2. 矩形框及文字

效果参见图纸demo示例：

Bash displays/demo/Demos/basic/edgebundle.json

 

实现步骤如下：

• 图纸中任意拖放一个矩形，找到“文本”属性，输入文字默认显示在下方

 

• 修改“位置”对应的整数值，会调整文字的相对位置，典型数值和文字显示位置

注意，文本位置属性中数值是固定的，跟矩形区域的大小、尺寸、位置无关，比如17固定是内部居中，不论怎么移动、修改矩形尺寸都会保持

17：内部居中

20：右侧垂直居中

31：正下方居中

更多数值对应的对其方式： 

利用矩形文字的位置属性，可以实现如右下角图片的效果，即左侧色块、右侧文字，中间间距可调的显示风格，用于作为界面中的关键字标题，避免矩形、文字两个组件拖放且对其等一系列繁琐操作！

以上是以矩形为例，实际上图纸上的所有矢量图元节点，都有文本属性，都可以这样设置！

最简单、常见的图标+文字形式需求，是不需要拖放多个图元并进行组合、布局、对齐等复杂操作的！

3. 连线文字位置

如下图所示，连线从起始点到目的点，当对文字属性设置内容时，显示区域默认是起止方向的线条下方，默认属性“位置”为17、“纵偏移”为2。

要想达到如图红色框选的那样，设置位置为3，纵偏移为-5即可！

 4. 交错避开文字

如下图所示，连线会穿插在文字中：

只需要在类型为boundary的情况下（其他某些类型下，锚点修改不起作用！），修改锚点值即可，注意锚点值跟文字属性的便宜像素是不一样的，锚点是相对位置，0.5、1、1.5等这样对应的位置变化就会倍数方式定位：

 

当然，还有方式，就是把其实位置17改成25，这样就在右下角显示文字了！