用户界面9-Slice设计

当创建用户界面时，您通常需要在不同的方面比例和视觉上将元素渲染为本地文本或其他未知大小的内容。这允许您创建各种大小的UI元素，无需 distort 边界或角落。

按照 9-切割 方法，一个图像（单个 Roblox 图像素材）内部分为九个子图像，每个子图像都有不同的缩放规则。

工作室编辑器

通过直接设置 Enum.ScaleType 和图像标签或按钮上的切片属性来设置片配置，但 Studio 的内置 9-Slice Editor 更直观。

打开编辑器

要在 Studio 中打开视觉 9-Slice Editor ：

1. 选择一个 ImageLabel 或 ImageButton 用有效的资产 ID 输入到其 图像 字段。

1. 将 ScaleType 属性设置为 Slice 。

1. 单击显示的 片中心 属性，然后单击行内的 … 。

1. 在打开的窗口中，4 条红色线覆盖图像，代表切片边缘。源图像大小也会显示。

设置偏距

在 Studio 中，从左、右、顶、和底边缘拖动红线以设置 偏移 。

当您重新位置拖动线时，UI 元素自动更新，以显示结果。