UI 9-Slice 設計

當創建具有自訂邊框和角落的 UI 時，您通常需要在不同的方面比例上渲染元素或視覺地包圍 本地文字 或其他內容的未知尺寸。這允許您創建不同大小的 UI 元素，而不會扭曲邊框或角落。

以 9-切片 方法，一個圖像 (單個 Roblox 圖像素材) 內部分為九個子圖像，每個子圖像都有不同的縮放規則。

工作室編輯器

您可以通過直接設置 Enum.ScaleType 和切片屬性在圖像標籤或按鈕上設置配置，但 Studio 的內置 9-Slice Editor 更直觀。

開啟編輯器

要在 Studio 中開啟視覺 9-Slice Editor ：

1. 選擇 ImageLabel 或 ImageButton 有效的資產 ID 在其 圖像 區域輸入。

1. 將 ScaleType 屬性設置為 Slice 。

1. 單擊顯示的 片中心 屬性，然後單擊行內的 … 。

1. 開啟的視窗中，4 條紅色線疊加圖像，代表切片的邊緣。 圖像來源大小也會顯示。

設定偏移

在 Studio 中，拖曳紅色線設定 偏移 從左，右，上，和下邊緣的圖像。

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