在画布上定位小部件
要将小部件添加到画布,请将其从“库”窗格中拖动。您还可以使用 UI 左上角的“插入”菜单中的选项绘制许多形状小部件。
要移动小部件或选择的小部件,请将其拖放到位或使用箭头键在画布上轻推它。您还可以使用顶部工具栏或样式窗格中的X和Y字段选择精确的画布坐标。
当您在画布上拖动小部件时,它们将捕捉到画布网格、您设置的任何指南以及附近的其他小部件。
一次定位多个小部件当您在画布上选择了多个小部件时,您可以选择整体更改整个选择的坐标或重新定位选择中的每个单独的小部件:
1.要重新定位整个选择,请使用顶部工具栏中的X和Y字段。这会将小部件的选择作为一个整体移动到画布上的目标坐标,并且每个小部件将保持其与目标坐标的相对距离。

2.要重新定位每个单独的小部件,请使用“样式”窗格中的X和Y字段。这会将选择中的每个小部件移动到画布上的目标坐标。
笔记:的X和/或ÿ在字段样式窗格将是空白的时,所选的元件位于所述画布上的不同点。
调整小部件的大小要调整小部件的大小,请在画布上选择它并拖动其调整大小手柄。您可以通过按住SHIFT拖动来保持小部件的纵横比。
您还可以使用顶部工具栏或样式窗格中的W和H字段为小部件选择精确尺寸。要保持小部件的纵横比,请单击W和H字段之间的保持纵横比图标。或者,您可以在其中一个字段中键入新值后按。SHIFTENTER
一次调整多个小部件的大小当您在画布上选择了多个小部件时,您可以选择按比例调整整个选区的大小或调整选区中每个单独的小部件的大小:
1.要调整整个选区的大小,请使用顶部工具栏中的W和H字段。这将设置选择本身的宽度和高度,然后按比例调整所选小部件的大小和位置以适应所选尺寸。
2.要调整每个小部件的大小,请使用样式窗格中的W和H字段。这会将选定的尺寸应用于选择中的每个小部件,例如将每个小部件的宽度设置为 150px。
笔记:当所选小部件具有不同尺寸时,样式窗格中的W和/或H字段将为空白。
距离指南/红线当您在画布上四处移动小部件时,会出现红色参考线,向您显示小部件与附近其他小部件之间的距离。这些指南还将向您显示小部件何时沿边缘或中点对齐。

您还可以在不移动小部件的情况下查看小部件之间的红线。这样做:
1.选择一个小部件。
2.按住ALT键的同时将光标悬停在第二个小部件上。
命名小部件
默认情况下,小部件没有命名。在大纲窗格和显示部件名称的其他位置,无名小部件是由自己的小工具类型在括号中标识:(Rectangle),(Image),等。
如果您在没有名称的小部件上输入文本,它将由文本的前几个词来标识。例如,默认段落小部件显示Lorem ipsum dolor si在“大纲”窗格中。
要为小部件命名,请在“大纲”窗格中缓慢双击它。或者,您可以选择它并在“样式”、“交互”或“备注”窗格的顶部输入名称。
分组小部件
您可以将小部件组织成组,以便将它们作为一个单元进行命名、定位和交互。为此,请选择两个或更多小部件,然后单击顶部工具栏中的“分组”。要拆分一组小部件,请选择该组并单击取消组合。
层序/深度顺序/前后
当两个或多个小部件相互重叠时,它们的“层顺序”决定了哪个小部件出现在前面。图层顺序较高的小部件将出现在前面,而较低的小部件将出现在后面。
图层顺序或“z-index”还决定了可以TAB在 Web 浏览器中使用键导航的小部件的 Tab 键顺序,例如文本字段和下拉列表等表单小部件。在TAB关键的重点最后面的小部件第一,并逐步向前移动。
您可以在“大纲”窗格中查看小部件的特定深度/z-index 位置。默认情况下,窗格从前到后排序,因此窗格顶部的小部件在前面,底部的小部件在后面。(如果需要,您可以通过单击“大纲”窗格右上角的“排序和过滤”图标来更改排序方向。)
重新排序小部件
要更改小部件的深度/z-index 位置,请在“大纲”窗格中上下拖动它。
顶部工具栏中还有用于此的按钮。使用Front按钮将选定的小部件移动到图表的前面,并使用Back按钮将其发送到后面。您还可以自定义顶部工具栏以包括向前和向后按钮,一次向前和向后移动所选小部件。
折叠和展开小部件
要在“大纲”窗格中折叠或展开小部件组(或具有嵌套结构的小部件,例如动态面板和中继器),请切换小部件或组名称旁边的箭头。
您还可以单击大纲窗格右上角的排序和筛选图标,然后选择折叠/展开全部以同时折叠或展开所有组。
对齐和分布小部件
顶部工具栏中的对齐和分布工具可用于自动组织一组围绕彼此的小部件选择。
对齐工具可以在左侧、中间或右侧水平对齐两个或多个选定的小部件,或在顶部、中间或底部垂直对齐。新位置基于所选的第一个小部件的位置。您必须至少选择两个小部件才能对齐它们。
分布工具可以水平或垂直地均匀分布三个或更多选定小部件的位置。您必须至少选择三个小部件才能分发它们。
笔记:如果需要,您可以自定义顶部工具栏以将这些选项合并到两个图标Align和Distribute 下。
将小部件锁定到画布当您锁定小部件时,您无法通过在画布上拖动来更改其大小和位置;相反,您必须使用顶部工具栏或样式窗格中的字段。这有助于防止锁定的小部件意外移动或调整大小。
要锁定或解锁小部件,请右键单击它并在上下文菜单中的锁定下选择适当的选项。如果需要,您还可以自定义顶部工具栏以包含锁定和解锁图标。

提示:在画布上选择时,锁定的小部件具有红色边框。如果您无法拖动特定小部件或调整其大小,请检查其边框颜色以查看它是否已锁定。
隐藏小部件您可以在画布上隐藏小部件,以便它们在 Web 浏览器中不可见。然后,您可以使用的显示动作动态显示的控件。(查看隐藏和显示小部件教程以了解更多信息。)
要隐藏小部件,请选择它并单击顶部工具栏或样式窗格中的隐藏图标。
隐藏的小部件在画布上显示为黄色。您可以在View → Masks的顶部菜单中切换遮罩。