简介

UI 画布窗口（UI）在可实时可视化地调整大小的画布上显示 UI 资产（UI Asset）内容，并且您可以在画布上实时编辑 UI 资产 的内容来改变 UI 的最终显示效果。UI 画布窗口显示的内容为已拖动到 UI 画布窗口或 层级窗口（Hierarchy）中的 UI 对象（UI Object）。

【UI_Editor_UICanvas001.png】

显示场景预览窗口

在 SandMod 编辑器的默认布局下，UI 编辑器 正中央会显示 UI 画布窗口（UI），如果没有显示或窗口消失，您可以在 UI 编辑器 中打开 菜单栏（Menu），并点选 窗口（Window） > 视图（Panel） > UI 画布窗口（UI） 进行显示。

【UI_Editor_UICanvas002.png】

UI 画布窗口基础操作

• 选中：使用鼠标左键，可以点击选取 UI 画布上指向的 UI 对象（UI Object）。

【UI_Editor_UICanvas004.gif】

• 移动：在 UI 画布上选中 UI 对象后，您可以鼠标指向该 UI 对象并长按鼠标左键拖动鼠标来移动该 UI 对象，如果此时您长按 Shift 按钮并移动 UI 对象，UI 对象仅会在 X 或 Y 轴上平移。

【UI_Editor_UICanvas005.gif】	【UI_Editor_UICanvas006.gif】
移动 UI 对象	平移 UI 对象

• 选中被遮挡的 UI 对象：当多个 UI 对象叠加在一起时，点击最上层（显示最全）的 UI 对象，并缓慢点击该 UI 对象，SandMod 会自动逐步选中被该 UI 对象遮挡的其他 UI 对象。

【UI_Editor_UICanvas007.gif】

• 平移窗口：长按鼠标右键并拖动鼠标，可以移动 UI 画布窗口。

【UI_Editor_UICanvas008.gif】

• 缩放窗口：滚动鼠标滚轮或类似功能可放大和缩小 UI 画布窗口。

【UI_Editor_UICanvas009.gif】

UI 画布窗口工具栏

游戏预览窗口工具栏包括以下按钮：

【UI_Editor_UICanvas010.png】

名称	图标	描述
屏幕分辨率适配（Aspect）		可选择不同值来定义 UI 画布的尺寸，以及观察在具有不同宽高比的显示器上的显示效果。默认情况下，此设置为 适配窗口（Free Aspect），即根据当前 游戏预览窗口（Game）的窗口尺寸实时调整矩形屏幕参考线框为当前 UI 画布窗口 的尺寸。 【UI_Editor_UICanvas011.png】 关于屏幕分辨率适配的使用方法和自定义分辨率的方法，请参阅 屏幕分辨率适配 章节。 值得注意的是，与 游戏预览窗口（Game）不同，此处设置的尺寸将会影响该 UI 画布的尺寸，UI 显示时会根据屏幕尺寸进行等比缩放至最少 3 条画布边缘与屏幕边缘重叠，会造成屏幕尺寸与 UI 画布尺寸不同等问题，因此建议保存 UI 资产前，此设置为 适配窗口（Free Aspect）。
颜色（Color）		设置背景的颜色，可使用不同颜色的背景查看 UI 的通用性，或者便于编辑和设计 UI。 【UI_Editor_UICanvas012.gif】 点击按钮即可打开调色板选取背景颜色，关闭调色板将确定背景颜色的修改。
矩形（Rect）		是否显示显示器矩形边框，点击此按钮至高亮则会显示用于识别显示器边界的白色边框。
栅格（Grid）		是否显示 UI 栅格，点击此按钮至高亮则会显示用于定位 UI 对象（UI Object）的栅格。
焦点（Focus）		聚焦选中的 UI 对象（UI Object），点击按钮后 UI 画布窗口 将会平移至选中的 UI 对象位于 UI 画布窗口的中心位置。

UI 对象变换

在 UI 画布窗口（UI）中选中 UI 对象（UI Object）除了对象会有高亮描边外，会自动为选中的 UI 对象添加矩形变换 小工具（Gizmo）。

【UI_Editor_UICanvas013.png】

您可以直接通过矩形变换 小工具（Gizmo）对 UI 对象执行以下操作：

• 点击并拖动 UI 对象可以移动 UI 对象。
• 点击并拖动 UI 对象上的顶点控制点，可以对 UI 对象进行保持对角顶点位置不变情况下同时修改 UI 对象的左右上下边距或中心点位置和宽高属性。
• 点击并拖动 UI 对象上的边控制点，可以对 UI 对象进行保持对边位置不变情况下同时修改 UI 对象的左右上下边距或中心点位置和宽高属性。

具体编辑方法，请查阅 UI 矩形变换 章节。