当前位置:首页 > draw.io教程

在 draw.io 中绘制和设置连接线样式

drawio5年前 (2021-03-30)draw.io教程9

连接线是将各个形状连接起来的线条,其一端或两端可能带有箭头。在图表中,连接线提供上下文信息,展示图表中各个形状和实体之间的关系。

连接器用于对相关信息和系统进行分组,显示信息和控制的流向,并指定 UML 图中功能和系统之间的复杂关系。

提示:连接线也称为线条或边。draw.io 中一些影响连接线的属性在定义连接线样式时会使用术语“边”。

浮动式和固定式连接器

draw.io 中有两种主要类型的连接器。

浮动连接器- 当您在绘图画布上移动形状时,这些连接器会沿着形状的周边移动,或者改变连接器的路径。

固定连接器- 即使您在绘图画布上移动形状,这些连接器也会保持与形状上的固定点连接。

连接器可以是固定的一端,另一端是浮动的,也可以是两端都采用相同类型的连接。

您可以更改形状的样式,使其仅允许连接器连接到连接点。移动形状时,连接器会自动吸附到最近的连接点

在形状之间画连接线

虽然形状库中有很多连接形状可供选择,但在绘图画布上绘制形状之间的连接线,然后根据需要设置样式会更容易。

在 draw.io 中,绘制连接线有几种不同的方法。

绘制浮动连接线:将鼠标悬停在现有形状上,单击并从四个方向箭头之一拖动连接线,然后将鼠标悬停在目标形状上。当形状轮廓变为蓝色时,放下连接线的末端。您会看到连接线的末端变为蓝色,并带有一个圆圈,表示这是一个浮动连接。

绘制固定连接线:将鼠标悬停在形状上即可查看固定连接点。单击并从其中一个连接点(绿色高亮显示的十字形)拖动连接线,然后将鼠标悬停在目标形状上。将连接线的末端拖放到绿色高亮显示的固定连接点上。您会看到连接线的末端变成绿色并带有十字形,表示这是一个固定连接。

固定连接点通常均匀分布在形状的外部。您可以覆盖此设置,并更改形状的样式以使用自定义连接点

您可以将连接的末端固定到形状内的任何位置:按住鼠标左键Alt,将连接器拖动到目标形状上,然后在形状上看到绿色轮廓(表示固定连接点)时松开连接器。

提示:如果目标形状位于源形状的正上方/正下方或正右侧/正左侧,请将鼠标悬停在源形状上,然后单击指向目标形状的箭头,即可快速连接这两个形状。

连接连接器

使用“其他形状”库中的航点形状来连接连接器,而不是让它们重叠。您可以将连接器拖放到航点形状上,也可以从航点形状拖动连接器,就像操作其他形状一样。

添加新形状时自动添加连接器

当您向绘图画布添加新形状时,draw.io 可以自动在它们之间添加连接线。

克隆并连接形状:将鼠标悬停在形状上,然后单击指向绘图画布上空白区域的方向箭头,然后选择要添加的形状并沿该方向连接它。

拖放形状:从形状库或绘图画布中拖动一个形状,将鼠标悬停在另一个形状上,然后将其放到其中一个方向箭头(或现有的未连接连接器)上。

了解如何使用快捷键添加和连接形状,以及克隆和连接形状。

向连接器添加标签

连接器可以有三个标签——一个在中间,两个在两端。

双击要添加标签位置的连接器。

当您在绘图画布上移动形状时,这些标签会随连接器一起移动,但您也可以将它们拖动到其他位置。单击标签将其选中,然后拖动菱形手柄到新位置。

提示:当您反转连接器时,源端和目标端的标签也会互换。

移动连接器的路径

连接器使用路径点来沿着图表中的路径移动。

将连接器的各个部分拖动到新的位置,即可改变其路径。拖动时,路径点会自动添加和移除。

如果要手动添加额外的航点,请右键单击连接器,然后从上下文菜单中选择“添加航点” 。

了解更多关于使用航点的信息

反转连接器: 通过格式面板中的“排列”选项卡,交换连接器的目标端和源端及其标签。

翻转连接器: 通过格式面板中的“排列”选项卡,可以水平或垂直翻转连接器。连接器穿过其路径点的路径将会改变,这可能会对连接器连接到形状时产生意想不到的后果。

样式连接器

默认的连接线样式是一条实线,目标端带有箭头。

就像您可以更改形状的颜色和轮廓一样,您可以使用右侧格式面板的“样式”选项卡中的选项,更改选定连接线的颜色和线条样式,并将连接线的末端设置为箭头或其他符号。

以下是各种连接器样式在编辑器图表中的显示方式。

尖锐/圆润/弯曲- 这会改变连接器中“弯曲”部分的外观,即在改变方向时是尖锐的拐角还是略微圆润的拐角,或者平滑的曲线。

颜色- 单击线条样式旁边的颜色按钮打开调色板,为连接线选择不同的颜色。

连接- 使用左上角的下拉列表选择线条的显示方式 - 单实线、双线或两种样式的“粗”箭头。拖动选定的双线连接线上的菱形控制柄,即可更改间隙大小和/或箭头大小。

图案- 使用顶部中间的下拉列表选择连接线/轮廓的不同图案。您可以选择实线、虚线或点线,以及各种不同的图案。

粗细- 在文本框中输入新pt值以更改连接线/轮廓的粗细。

路径点- 选择一条预定义的路径,该路径将决定连接器中添加 多少个路径点

。在上面的示例中,您可以看到不同样式的路径点差异很大。实体关系路径点样式始终从源形状的同一侧离开并进入目标形状,并且在连接器中有两个正交弯曲——这种样式的连接器没有其他路径点。

源和目标“箭头” ——从下拉列表中选择连接符。箭头和符号有很多种类型。您也可以选择None仅显示一条直线。

线段端点线段起点- 设置箭头或符号的大小,以及它与形状轮廓之间的间距。间距的负值会将连接线的末端置于形状边界内。

跳线- 选择重叠连接线的显示方式。在跳线样式右侧的文本框中输入新数字,即可更改间距大小。

不透明度- 更改不透明度百分比,使所选连接器下方的形状和连接器显示出来。

阴影草图- 启用复选框,即可为连接线添加阴影,或使连接线看起来像是粗略的手绘效果。

您可以像复制形状样式一样复制和粘贴连接器样式,只需使用格式面板“样式”选项卡中的两个按钮—— “复制样式”“粘贴样式”即可。

展开格式面板中 “样式”选项卡底部的属性列表,以更改其他连接器样式属性。

手动编辑连接器的样式

您可以使用键值对手动编辑连接器的样式key=value

  1. 右键单击连接器,然后选择“编辑样式”。或者,选择一个连接器,然后Ctrl+E在 Windows 系统中按 Enter 键,或Cmd+E在 macOS 系统中按 Ctrl+Shift+C。

  2. 在文本框中编辑样式,然后单击“应用”保存更改。

查看所有可用的样式选项,并了解如何为图表编辑器设置默认样式。