UI 9切片设计

在创建具有自定义边框和角落的UI时，您经常需要以不同的宽高比呈现元素，并在视觉上包围本地化文本或其他未知尺寸的内容。这使您可以创建不同大小的UI元素，而不会扭曲边框或角落。

在 9切片 方法下，一张图片（一个单一的Roblox图片资源）被内部划分为九个子图片，每个子图片都有不同的缩放规则。

Studio编辑器

可以通过直接在图像标签或按钮上设置 Enum.ScaleType 和切片属性来配置切片，但Studio内置的 9切片编辑器 更加直观。

打开编辑器

要在Studio中打开可视的 9切片编辑器：

1. 选择一个 ImageLabel 或 ImageButton，在其 Image 字段中输入一个有效的资产ID。

1. 将 ScaleType 属性设置为 Slice。

1. 点击随之出现的 SliceCenter 属性，然后点击该行中的 …。

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

设置偏移量

在Studio中，拖动红线以设置图像的左、右、上和下边缘的 偏移量。

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