Projekt UI 9-prętowy

*Ta zawartość została przetłumaczona przy użyciu narzędzi AI (w wersji beta) i może zawierać błędy. Aby wyświetlić tę stronę w języku angielskim, kliknij tutaj.

Podczas tworzenia interfejsu z niestandardowymi granicami i krawędziami często będziesz musiał renderować elementy przy różnych proporcjach aspektu i wizualnie otaczać lokalizowanym tekstem lub innymi treściami o nieznanych wymiarach.Umożliwia to tworzenie elementów interfejsu o różnych rozmiarach bez zniekształcania granic lub krawędzi.

Bez 9-Slice
>

Z 9-Slice
>

W ramach podejścia 9-ćwiek , jedno obraz (pojedynczy zasób obrazu Roblox) jest podzielone wewnętrznie na dziewięć podobrazów, każdy z różnymi zasadami skalowania.

PodobrazSkalowanie
1379 (kąty)nie ma
28 (krawędzie górne/dolne)poziomy
46 (lewe/prawe krawędzie)pionowy
5(środek)poziomy + pionowy

Edytor studio

Konfiguracja przekroju jest możliwa poprzez bezpośrednie ustawienie Enum.ScaleType i właściwości przekroju na etykiecie obrazu lub przycisku, ale wbudowany edytor 9-Przekrojów Studio jest bardziej intuicyjny.

Otwieranie edytora

Aby otworzyć wizualny 9-przycinowy edytor w Studio:

  1. Wybierz ImageLabel lub ImageButton z ważnym ID zasobu wpisanym do jego pola obrazu .
  1. Ustaw właściwość Rodzaj skali na Kawałek .
  1. Kliknij na właściwość Centrum przecięcia , która się pojawia, a następnie kliknij na w ramach rzędu.
  1. W otwartym oknie 4 czerwone linie pokrywają obraz, reprezentując krawędzie pasków. Rozmiar źródłowego obrazu również jest wyświetlany.

Ustaw odległości

W Studio przeciągnij czerwone linie, aby ustawić odległości z lewej, prawej, górnej i dolnej krawędzi obrazu.

Gdy przesuwasz linie przeciągające, element interfejsu użytkownika automatycznie aktualizuje się, aby pokazać wynik.

Ustawienie przekroju
>

Wynik na etykiecie obrazu 500×200
>

Ustawienie przekroju
>

Wynik na etykiecie obrazu 500×200
>