Khi tạo UI với các biên giới và góc tùy chỉnh, bạn thường sẽ cần phải hiển thị các yếu tố theo tỷ lệ khác nhau và xung quanh vị trí văn bản địa phương hoặc các nội dung khác của kích thước không xác định.Điều này cho phép bạn tạo các thành phần UI có kích cỡ khác nhau mà không làm méo mó các biên giới hoặc góc.
Trong phương pháp 9 lát , một hình ảnh (một tài nguyên hình ảnh duy nhất của Roblox) được chia nội bộ thành chín hình ảnh con, mỗi hình ảnh có các quy tắc phóng to khác nhau.
| Hình ảnh thu nhỏ | Tăng quy mô |
|---|---|
| 1379 (các góc) | không có |
| 28 (cạnh trên/dưới) | ngang hàng |
| 46 (cạnh trái/phải) | dọc |
| 5 (trung tâm) | ngang + dọc |
Chỉnh sửa studio
Cài đặt cắt bột là có thể bằng cách trực tiếp đặt Enum.ScaleType và thuộc tính cắt trên nhãn hình ảnh hoặc nút, nhưng Trình biên tập 9 lát cắt của Studio có giao diện dễ hiểu hơn.
Mở trình biên tập
Để mở trình biểu diễn 9-Slice Editor trong Studio:
- Chọn một ImageLabel hoặc ImageButton với một ID tài sản hợp lệ được nhập vào trường Hình ảnh của nó.
- Đặt thuộc tính ScaleType thành Slice .
- Nhấp vào thuộc tính SliceCenter xuất hiện, sau đó nhấp vào … bên trong hàng.
- Trong cửa sổ mở ra, 4 dòng màu đỏ che lấp hình ảnh, đại diện cho các cạnh của các mảnh. Kích thước hình ảnh nguồn cũng được hiển thị.
Đặt mức bù trừ
Trong Studio, kéo các đường màu đỏ để đặt offsets từ các cạnh trái, phải, trên và dưới của hình ảnh.
Nếu bạn cần độ chính xác cao hơn, hãy nhập giá trị offset vào các trường ở bên phải cửa sổ biên tập.
Khi bạn di chuyển lại các dòng kéo, thành phần UI tự động cập nhật để hiển thị kết quả.
Giá trị offset khác với giá trị thuộc tính SliceCenter của đối tượng UI và đại diện cho số pixel giữa cạnh của hình ảnh nguồn và thanh trượt liên quan đến cạnh đó.