Các bộ điều chỉnh giao diện người dùng

Bằng cách sử dụng các bộ điều chỉnh giao diện, bạn có thể tùy chỉnh thêm diện mạo của GuiObjects.

• Áp dụng một gradient cho nền của một đối tượng.
• Áp dụng một stroke cho văn bản hoặc một đường viền.
• Đặt góc bo tròn cho một đối tượng.
• Tăng padding giữa các đường biên của một đối tượng.
• Thêm một drop shadow phía sau một đối tượng.

Gradient

Đối tượng UIGradient áp dụng một gradient màu sắc và độ trong suốt cho đối tượng cha GuiObject.

Bạn có thể cấu hình gradient bằng cách:

• Đặt màu sắc của nó thông qua một ColorSequence trong thuộc tính Color của gradient.
• Đặt độ trong suốt của nó thông qua một NumberSequence trong thuộc tính Transparency của gradient.
• Chọn loại của gradient thông qua thuộc tính Type.
• Chọn điểm bắt đầu của gradient (bên trong hoặc bên ngoài giới hạn của cha) thông qua thuộc tính Offset.
• Chọn góc của gradient thông qua thuộc tính Rotation.
• Chọn tỷ lệ của gradient thông qua thuộc tính Scale.
• Chọn hành vi edge sampling của gradient thông qua thuộc tính TileMode.

Chuỗi màu

Để đặt chuỗi màu của một gradient:

1. Trong cửa sổ Explorer, chọn UIGradient.

2. Trong cửa sổ Properties, nhấp vào trường thuộc tính Color, sau đó nhấp vào nút ⋯ bên phải ô nhập.

   

3. Mỗi tam giác trên trục dưới của chuỗi màu là một keypoint xác định giá trị màu tại điểm đó.

   

   1. Nhấp vào một keypoint trong chuỗi màu để chọn hoặc định vị lại nó, hoặc thêm một keypoint khác bằng cách nhấp vào bất kỳ đâu trên đồ thị.
   2. Nhấp vào hình vuông nhỏ bên cạnh Color để mở cửa sổ pop-up Colors, sau đó chọn màu mong muốn cho keypoint.
   3. Nếu cần, lặp lại các bước này để thêm/điều chỉnh màu sắc trên đồ thị.

Độ trong suốt

Để điều chỉnh độ trong suốt của một gradient trên toàn bộ phạm vi của nó:

1. Trong cửa sổ Explorer, chọn UIGradient.

2. Trong cửa sổ Properties, nhấp vào trường thuộc tính Transparency, sau đó nhấp vào nút ⋯ bên phải ô nhập.

   

3. Mỗi hình vuông trên đồ thị chuỗi số là một keypoint xác định giá trị độ trong suốt tại điểm đó.

   

   1. Nhấp vào một keypoint trong chuỗi số để chọn hoặc định vị lại nó, hoặc thêm một keypoint khác bằng cách nhấp vào bất kỳ đâu trên đồ thị.
   2. Nhập một tổ hợp thời gian/giá trị cụ thể thông qua các ô nhập Time và Value.
   3. Nếu cần, lặp lại các bước này để thêm/điều chỉnh các mức độ trong suốt trên đồ thị.

Loại

Thuộc tính Type của một gradient đặt loại của nó từ Linear, Radial, hoặc Conical.

• Linear — Chuỗi màu/độ trong suốt chuyển tiếp theo một đường thẳng qua phần tử. Hướng được điều khiển bởi góc quay và vị trí bởi điểm offset. Đây là mặc định.

• Radial — Chuỗi màu/độ trong suốt tỏa ra từ trung tâm của phần tử, có thể được dịch chuyển bởi Offset. Bán kính được xác định bởi trung bình chiều rộng và chiều cao của phần tử chia cho hai, hiệu quả là $\text{(width+height)/4}$. Rotation không ảnh hưởng đến gradient hình tròn.

• Conical — Chuỗi màu/độ trong suốt quét theo chiều kim đồng hồ quanh trung tâm của phần tử, có thể được dịch chuyển bởi Offset. Rotation điều khiển góc bắt đầu và kết thúc của quét. Mặc định, điều này quét từ 0 đến 360 độ, nhưng các giá trị Scale nhỏ hơn 1 có thể giảm góc đó.

Offset và góc quay

Các thuộc tính Offset và Rotation cho phép bạn điều chỉnh các điểm điều khiển của gradient và góc của nó. Như được minh họa trong các sơ đồ sau, Offset dựa trên một tỷ lệ phần trăm của chiều rộng hoặc chiều cao của cha, và cả giá trị dương và âm đều hợp lệ.

Tương tự, khi bạn xoay gradient, các điểm điều khiển cũng xoay:

Tỷ lệ

Tỷ lệ Scale của một gradient nhân với phạm vi của gradient, điều khiển mức độ mà chuỗi màu/độ trong suốt được hiển thị trong phần tử.

• Khi Scale nhỏ hơn 1, gradient trải dài ít hơn toàn bộ phạm vi. Màu sắc/độ trong suốt còn lại được lấp đầy theo thuộc tính TileMode.

• Khi Scale lớn hơn 1, gradient trải dài nhiều hơn toàn bộ phạm vi và chỉ một phần của màu sắc/độ trong suốt được hiển thị.

Chế độ lặp

Thuộc tính TileMode đặt cách mà gradient lặp lại khi chuỗi đầy đủ không hoàn toàn bao phủ phần tử cha.

• Clamp — Chế độ mặc định nơi các giá trị màu/độ trong suốt ở đầu và cuối chuỗi kéo dài vô hạn, vì vậy các giá trị bắt đầu lấp đầy bất kỳ khu vực nào trước gradient và các giá trị kết thúc lấp đầy bất kỳ khu vực nào sau nó.

• Repeat — Gradient lặp lại bằng cách quấn chuỗi màu/độ trong suốt một cách liền mạch từ cuối trở lại đầu. Điều này có thể tạo ra một đường nối rõ ràng nếu các giá trị màu/độ trong suốt đầu tiên và cuối cùng trong chuỗi khác nhau.

• Mirror — Gradient phản chiếu tại mỗi ranh giới để chuỗi màu/độ trong suốt ping‑pong. Điều này tạo ra một sự lặp lại mượt mà mà không có đường nối, vì hướng đảo ngược tại mỗi cạnh của tile.

Stroke

Đối tượng UIStroke áp dụng một đường viền cho văn bản hoặc một đường biên. Các tính năng chính bao gồm:

• Màu sắc có thể điều chỉnh và độ dày của đường viền.
• Khả năng đặt độ trong suốt của đường viền độc lập với độ trong suốt của cha.
• Vị trí và/hoặc offset có thể tùy chỉnh tương đối với đường biên của cha.
• Ba kiểu góc (tròn, vát, hoặc miter).
• Hỗ trợ gradient cho đường viền thông qua đối tượng UIGradient.

Độ dày

Bạn có thể đặt độ dày của đường viền thông qua thuộc tính Thickness được đo bằng pixel (mặc định) hoặc tỷ lệ tương đối với cha, tùy thuộc vào StrokeSizingMode của bộ điều chỉnh. Nếu đường viền nằm trên văn bản và StrokeSizingMode được đặt thành ScaledSize, độ dày sẽ tương đối với kích thước phông chữ.

Màu sắc hoặc gradient

Bạn có thể đặt màu sắc của đường viền thông qua thuộc tính Color, cũng như chèn một đối tượng con UIGradient để tạo ra các đường viền gradient.

Đường viền văn bản hoặc biên

Tùy thuộc vào loại cha của nó, UIStroke hoạt động như một đường viền văn bản hoặc như một đường biên. Khi bạn gán UIStroke cho một đối tượng văn bản như TextLabel, nó sẽ áp dụng cho đường viền của văn bản; khi bạn gán UIStroke cho các GuiObjects khác, nó sẽ áp dụng cho đường biên.

Khi áp dụng cho một đối tượng văn bản, bạn có thể ghi đè hành vi mặc định của đường viền bằng thuộc tính ApplyStrokeMode, cho phép bạn áp dụng đường viền cho các giới hạn của đối tượng thay vì văn bản. Bạn thậm chí có thể điều khiển đường viền văn bản và đường biên một cách độc lập bằng cách gán hai đối tượng UIStroke cho một đối tượng văn bản, một được đặt thành Contextual và cái còn lại được đặt thành Border.

Vị trí/offset của đường biên

BorderStrokePosition đặt vị trí của đường viền tương đối với đường biên của cha và BorderOffset cho phép bạn chỉ định một offset bổ sung cho vị trí của đường viền.

Độ trong suốt

Thuộc tính Transparency đặt độ trong suốt của đường viền độc lập với BackgroundTransparency hoặc TextTransparency của đối tượng cha. Điều này cho phép bạn render văn bản và đường biên "rỗng" (chỉ bao gồm một đường viền).

Kiểu góc

Thuộc tính LineJoinMode cho phép bạn kiểm soát cách các góc được diễn giải. Nó chấp nhận một giá trị là Round, Bevel, hoặc Miter.

Xếp lớp

Để xếp nhiều đối tượng UIStroke anh em trên một GuiObject từ trước ra sau, bạn có thể sử dụng thuộc tính ZIndex. Những đối tượng có ZIndex thấp hơn sẽ được render dưới (phía sau) những đối tượng có ZIndex cao hơn.

Lưu ý rằng thứ tự render cho các đối tượng UIStroke có cùng ZIndex là không xác định. Đừng áp dụng nhiều đối tượng UIStroke với cùng một chỉ số nếu thứ tự render của chúng quan trọng.

Góc

Đối tượng UICorner áp dụng biến dạng cho các góc của đối tượng cha GuiObject. Bạn có thể kiểm soát bán kính áp dụng thông qua thuộc tính CornerRadius bằng cách sử dụng Scale hoặc Offset.

Scale làm tròn các góc theo một tỷ lệ phần trăm dựa trên tổng chiều dài của cạnh ngắn nhất của cha, có nghĩa là một tỷ lệ 0.5 hoặc cao hơn sẽ biến dạng cha thành hình "viên thuốc", bất kể chiều rộng hoặc chiều cao của nó. Offset làm tròn các góc theo một số pixel cụ thể, bất kể chiều rộng/chiều cao của cha.

Bạn cũng có thể kiểm soát các góc riêng lẻ thông qua các thuộc tính TopLeftRadius, TopRightRadius, BottomRightRadius, và BottomLeftRadius.

Padding

Một đối tượng UIPadding áp dụng padding trên, dưới, trái và/hoặc phải cho nội dung của đối tượng cha GuiObject. Ví dụ, bạn có thể di chuyển văn bản bên trong một nhãn văn bản xuống hoặc lên bằng cách áp dụng một offset cho thuộc tính PaddingBottom của bộ điều chỉnh.

Shadow

Một đối tượng UIShadow render một drop shadow phía sau đối tượng UI cha của nó. Các tính năng chính bao gồm:

• Điều chỉnh độ mờ của bóng.
• Điều chỉnh màu sắc và độ trong suốt của bóng.
• Điều chỉnh offset và độ lan rộng của bóng.
• Nếu đối tượng cha được xoay bởi GuiObject.Rotation, bóng cũng sẽ được xoay.
• Nếu đối tượng cha có góc bo tròn, bóng cũng sẽ có các góc bo tròn.

Độ mờ

Thuộc tính BlurRadius xác định độ mờ của bóng. Một giá trị lớn hơn làm cho các cạnh của bóng trở nên mềm mại hơn. Lưu ý rằng yếu tố tỷ lệ của thuộc tính UDim này là tương đối với chiều rộng hoặc chiều cao của cha, cái nào ngắn hơn.

Màu sắc và độ trong suốt

Thuộc tính Color xác định màu sắc của bóng, trong khi Transparency đặt độ trong suốt của bóng với 0 là hoàn toàn không trong suốt và 1 là hoàn toàn trong suốt.

Offset và độ lan rộng

Thuộc tính Offset di chuyển bóng tương đối với vị trí của cha, trong khi Spread mở rộng hoặc thu hẹp bóng tương đối với kích thước của cha.