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

在图表中,形状数据可以做什么?

drawio5年前 (2021-09-21)draw.io教程9

图表中的形状、连接线和文本元素均以 XML 格式描述,包括它们的大小、位置、分组、形状样式、在绘图画布上的 Z 轴顺序以及彼此之间的连接方式。您还可以添加更多信息,例如标签、工具提示、链接、自定义形状属性等等,从而创建更丰富的图表和交互功能。

使用形状数据绘制更丰富的图表

附加形状数据可以用于多种不同的用途。

编辑形状数据

要查看所选形状的元数据,请Ctrl+M在 Windows 上按,或Cmd+M在 macOS 上按。

或者,在右侧格式面板的“样式”选项卡中,从列表中选择“编辑”>“编辑数据”,或者右键单击形状并从上下文菜单中选择“编辑”>“编辑数据”,或者从编辑器菜单中 选择“编辑”>“编辑数据” 。

在形状属性对话框中,您可以添加和编辑附加到该形状的额外信息。

在上面的示例中,该形状包含链接、标签和工具提示。

了解如何在 draw.io 编辑器中使用形状元数据

将形状数据从一个形状复制到另一个形状

  1. 选择包含要复制的形状数据的源形状。

  2. 在右侧格式面板的“样式”选项卡中,单击“编辑”>“复制数据” 。

  3. 选择目标形状,然后“样式”选项卡中单击“编辑”>“粘贴数据”以覆盖源形状的元数据。

提取形状数据

  1. 选择包含要导出的元数据的形状。

  2. 在右侧格式面板的“样式”选项卡中,单击“编辑”>“复制数据” 。

  3. 单击“导出”以查看 XML 中显示的形状数据,包括形状的标签文本、样式和形状属性(如果已定义)。

开发者工具:点击控制台将形状数据导出到浏览器的控制台。

使用预定义的形状属性

在 draw.io 中,一些形状属性是预定义的,包括tagstooltiplink

您可以分别通过各自的对话框添加这些元素——您不必直接通过此形状属性对话框编辑形状数据。

为形状添加工具提示

工具提示是另一种形状元数据,当您将鼠标悬停在编辑器或灯箱查看器中的形状上时,工具提示就会显示。工具提示在培训图表中非常有用,或者在与团队成员协作处理图表时,可以用来为形状添加注释。

选择一个形状,然后从菜单中选择“编辑”>“编辑工具提示”Alt+Shift+T ,或按快捷键添加或编辑形状的工具提示。

了解更多关于使用工具提示的信息。

您可以通过在形状中添加链接,引导图表的受众访问图表中其他页面或网络上存储的更多信息。

当您将鼠标悬停在形状上时,目标 URL 会以工具提示的形式显示。如果形状本身也有工具提示,则会显示工具提示的内容。

在图形上使用自定义链接,可以为图形添加交互功能。自定义链接以逗号分隔的 JavaScript 对象列表 (JSON) 的形式编写,添加方式与普通链接相同。

请参阅 draw.io 中如何构建自定义链接。

或者,您也可以在相关形状上添加标签,以增加交互性。

标签是一种预定义的形状元数据类型,它提供了一种关联形状、连接器和文本的方法,而无需将它们分组在一起或将它们全部放在图表中的同一图层上。

在 draw.io 编辑器和灯箱查看器中,您可以根据标签显示和隐藏相关形状。标签使您能够更轻松地处理复杂图表,或为培训图表添加交互功能。

了解更多关于在图表中使用标签的信息。

使用自定义形状属性

通过向形状应用自定义属性或元数据,您可以向图表中的元素添加任何观众可能需要清楚理解的附加信息。

如果希望在鼠标悬停在形状上时显示自定义形状属性,请确保尚未定义工具提示。

开发者工具: 属性插件- 当您将鼠标悬停在形状上时,会在 draw.io 编辑器和灯箱查看器中显示形状数据,如下所示。

使用带占位符的自定义属性

您可以使用自定义属性做一些有用且有趣的事情,包括在使用占位符(类似于变量)时自动更改其值。

例如,您可以更改形状的填充颜色,或根据其位置(例如在特定容器形状内或其他形状内)更改标签。占位符可用于标签和工具提示文本,以及形状元数据。

了解更多关于使用占位符的信息。

自定义属性不仅可以应用于形状、连接线和文本,还可以全局应用。请确保图表中未选中任何内容,然后单击“编辑数据”

编辑形状样式和几何形状

虽然形状样式和几何信息不被视为形状属性,但您可以像编辑形状属性一样编辑它们。这样,您就可以为图表创建更复杂的自定义形状。

要查看形状样式信息Ctrl+E,请在 Windows 或macOS 系统中选择形状并按 Enter 键Cmd+E,或者选择形状后,在格式面板的“样式”选项卡中单击“编辑”>“编辑样式”。您也可以直接编辑 XML 来描述不同的形状样式

要创建自定义形状,除了形状样式之外,还需要描述形状的几何形状。在 draw.io 编辑器菜单中,单击“排列”>“插入”>“形状”。在文本字段中输入几何形状和样式信息。