UI 9 切片設計

在創建具有自定義邊框和角落的 UI 時，您通常需要以不同的長寬比渲染元素，並在視覺上包圍 本地化文本 或其他未知尺寸的內容。這使您能夠在不扭曲邊框或角落的情況下創建不同大小的 UI 元素。

在 9 切片 方法中，一張圖像（單個 Roblox 圖像資產）在內部被分割成九個子圖像，每個子圖像具有不同的縮放規則。

Studio 編輯器

可以通過直接設置圖像標籤或按鈕上的 Enum.ScaleType 和切片屬性來配置切片，但 Studio 的內建 9 切片編輯器 更直觀。

開啟編輯器

要在 Studio 中打開可視的 9 切片編輯器：

1. 選擇一個 ImageLabel 或 ImageButton，在其 Image 字段中輸入有效的資產 ID。

1. 將 ScaleType 屬性設置為 Slice。

1. 點擊出現的 SliceCenter 屬性，然後點擊行中的 …。

1. 在彈出的窗口中，四條紅線覆蓋在圖像上，表示切片的邊緣。源圖像的大小也會顯示出來。

設置偏移量

在 Studio 中，拖動紅線以設置圖像的左、右、上和下邊緣的 偏移量。

當您重新定位拖曳線時，UI 元素會自動更新以顯示結果。