/
UICorner.yaml
110 lines (89 loc) · 3.7 KB
/
UICorner.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
name: UICorner
type: class
category:
memory_category: Instances
summary: |
A UIComponent that will apply deformation to shapes of corners of its parent
`Class.GuiObject`.
description: |
A UIComponent that will apply deformation to shapes of corners of its parent
`Class.GuiObject`. Input, but not descendants, will be clipped to the round
corner area.
![ImageLabel with rounded corners | Image Credit: 0Techy](/assets/legacy/RoundedImage.jpg)
## Using the component
To use the UICorner UIComponent:
1. Create a `Class.Frame` / `Class.ImageLabel` / `Class.ImageButton` /
`Class.TextLabel` / `Class.TextButton` / `Class.ViewportFrame`
2. Insert a UICorner component as its child
3. Adjust the round corner radius by changing the
`Class.UICorner.CornerRadius|CornerRadius` property
**Note:** UICorner cannot be applied to a `Class.ScrollingFrame`.
## UICorner vs 9-slices
Alternatively, rounded backgrounds can be accomplished using 9-slices. As a
result, it is helpful to understand the pros and cons of UICorner and
9-slices:
### UICorner
- Pros
- Can be used to round `Class.ViewportFrame|ViewportFrames` and image assets
- Allows for a scriptable and dynamic corner radius
- Cons
- There is a performance overhead (Screen Space specifically) as it needs
extra processing on each pixel, while 9-slice only involves simple sampling
### 9-slices
- Pros
- Suitable for highly decorative borders that are not just rounded
- If you have a lot of rounded rectangles with solid colors and you pay
special attention to low-end devices, using 9-slice may be more performance
efficient
- Cons
- Hard to apply to existing image assets
- Different corner sizes require different assets
## How the corner radius is calculated internally
In order to keep the circular shape of round corners with the UDim
CornerRadius value, the round corner radius internally will be calculated as
follows:
`radius = min(min(rectWidth, rectHeight) / 2, CornerRadius.scale * min(rectWidth, rectHeight) + CornerRadius.offset)`
This means that:
1. The radius of the x-axis is always the same as the radius of y axis.
2. The scale will always apply to the minimum edge.
3. Rounded rectangles will always be in a pill shape if CornerRadius is set to
a value that leads to a calculated result greater than half of the
rectangles' minimum edge.
It is suggested to always use either scale or offset to define CornerRadius
instead of mixing them up.
code_samples:
inherits:
- UIComponent
tags: []
deprecation_message: ''
properties:
- name: UICorner.CornerRadius
summary: |
Determines the radius, in pixels, of the `Class.UICorner` UIComponent.
description: |
A `Datatype.UDim` property that determines the radius, in pixels, of the
`Class.UICorner` UIComponent, according to the following formula:
`radius = min(min(rectWidth, rectHeight) / 2, CornerRadius.scale * min(rectWidth, rectHeight) + CornerRadius.offset)`
This means that:
1. The radius of the x-axis is always the same as the radius of y axis.
2. The scale will always apply to the minimum edge.
3. Rounded rectangles will always be in a pill shape if CornerRadius is
set to a value that leads to a calculated result greater than half of
the rectangles' minimum edge.
It is suggested to always use either scale or offset to define
CornerRadius instead of mixing them up.
code_samples:
type: UDim
tags: []
deprecation_message: ''
security:
read: None
write: None
thread_safety: ReadSafe
category: Appearance
serialization:
can_load: true
can_save: true
methods: []
events: []
callbacks: []