1. 拓扑图连线
效果参见图纸demo示例:
Bash |
实现步骤如下:
- 点击工具栏连线,依次在图纸中选中两个图元,即可完成基本连线
- 选中线条配置连线类型,比如"ortho"
|
|
- 配置连线的两端箭头样式,在“图标集”属性中
JSON |
2. 矩形框及文字
效果参见图纸demo示例:
Bash |
实现步骤如下:
- 图纸中任意拖放一个矩形,找到“文本”属性,输入文字默认显示在下方
- 修改“位置”对应的整数值,会调整文字的相对位置,典型数值和文字显示位置
注意,文本位置属性中数值是固定的,跟矩形区域的大小、尺寸、位置无关,比如17固定是内部居中,不论怎么移动、修改矩形尺寸都会保持
17:内部居中
20:右侧垂直居中
31:正下方居中
更多数值对应的对其方式:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
利用矩形文字的位置属性,可以实现如右下角图片的效果,即左侧色块、右侧文字,中间间距可调的显示风格,用于作为界面中的关键字标题,避免矩形、文字两个组件拖放且对其等一系列繁琐操作!
以上是以矩形为例,实际上图纸上的所有矢量图元节点,都有文本属性,都可以这样设置!
最简单、常见的图标+文字形式需求,是不需要拖放多个图元并进行组合、布局、对齐等复杂操作的!
3. 连线文字位置
如下图所示,连线从起始点到目的点,当对文字属性设置内容时,显示区域默认是起止方向的线条下方,默认属性“位置”为17、“纵偏移”为2。
要想达到如图红色框选的那样,设置位置为3,纵偏移为-5即可!
4. 交错避开文字
如下图所示,连线会穿插在文字中:
只需要在类型为boundary的情况下(其他某些类型下,锚点修改不起作用!),修改锚点值即可,注意锚点值跟文字属性的便宜像素是不一样的,锚点是相对位置,0.5、1、1.5等这样对应的位置变化就会倍数方式定位:
当然,还有方式,就是把其实位置17改成25,这样就在右下角显示文字了!