1# Rect
2
3The **Rect** component is used to draw a rectangle.
4
5>  **NOTE**
6>
7>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12Not supported
13
14
15## APIs
16
17Rect(value?: {width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} |{width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number})
18
19**Widget capability**: This API can be used in ArkTS widgets since API version 9.
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name| Type| Mandatory| Description|
28| -------- | -------- | -------- | -------- |
29| value | {width?: string \| number,height?: string \| number,radius?: string \| number \| Array&lt;string \| number&gt;} \| {width?: string \| number,height?: string \| number,radiusWidth?: string \| number,radiusHeight?: string \| number} | No| **width**: width<br>Default value: **0**<br>An invalid value is handled as the default value.<br>**height**: height<br>Default value: **0**<br>An invalid value is handled as the default value.<br>**radius**: radius of the rounded corner. You can set separate radiuses for the four rounded corners.<br>This attribute works in a similar manner as **radiusWidth**/**radiusHeight**. When they are used together, it takes precedence over **radiusWidth**/**radiusHeight**.<br>Default value: **0**<br>An invalid value is handled as the default value.<br>**radiusWidth**: width of the rounded corner.<br>Default value: **0**<br>An invalid value is handled as the default value.<br>**radiusHeight**: height of the rounded corner.<br>Default value: **0**<br>An invalid value is handled as the default value.|
30
31## Attributes
32
33In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
34
35### radiusWidth
36
37radiusWidth(value: number | string)
38
39Sets the width of the rounded corner. If not set, the height of the rounded corner is the same as its width. An invalid value is handled as the default value.
40
41**Widget capability**: This API can be used in ArkTS widgets since API version 7.
42
43**Atomic service API**: This API can be used in atomic services since API version 11.
44
45**System capability**: SystemCapability.ArkUI.ArkUI.Full
46
47**Parameters**
48
49| Name| Type                      | Mandatory| Description                      |
50| ------ | -------------------------- | ---- | -------------------------- |
51| value  | number \| string | Yes  | Width of the rounded corner.<br>Default value: **0**|
52
53### radiusHeight
54
55radiusHeight(value: number | string)
56
57Height of the rounded corner. If not set, the width of the rounded corner is the same as its height.  An invalid value is handled as the default value.
58
59**Widget capability**: This API can be used in ArkTS widgets since API version 7.
60
61**Atomic service API**: This API can be used in atomic services since API version 11.
62
63**System capability**: SystemCapability.ArkUI.ArkUI.Full
64
65**Parameters**
66
67| Name| Type                      | Mandatory| Description                      |
68| ------ | -------------------------- | ---- | -------------------------- |
69| value  | number \| string | Yes  | Height of the rounded corner.<br>Default value: **0**|
70
71### radius
72
73radius(value: number | string | Array&lt;string | number&gt;)
74
75Sets the radius of the rounded corner.  An invalid value is handled as the default value.
76
77**Widget capability**: This API can be used in ArkTS widgets since API version 9.
78
79**Atomic service API**: This API can be used in atomic services since API version 11.
80
81**System capability**: SystemCapability.ArkUI.ArkUI.Full
82
83**Parameters**
84
85| Name| Type                                                        | Mandatory| Description                        |
86| ------ | ------------------------------------------------------------ | ---- | ---------------------------- |
87| value  | number \| string \| Array&lt;string \| number&gt; | Yes  | Radius of the rounded corner. You can set separate radiuses for the four rounded corners.<br>Default value: **0**|
88
89### fill
90
91fill(value: ResourceColor)
92
93Color of the fill area. An invalid value is handled as the default value.
94
95**Widget capability**: This API can be used in ArkTS widgets since API version 9.
96
97**Atomic service API**: This API can be used in atomic services since API version 11.
98
99**System capability**: SystemCapability.ArkUI.ArkUI.Full
100
101**Parameters**
102
103| Name| Type                                      | Mandatory| Description                                  |
104| ------ | ------------------------------------------ | ---- | -------------------------------------- |
105| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the fill area.<br>Default value: **Color.Black**|
106
107### fillOpacity
108
109fillOpacity(value: number | string | Resource)
110
111Opacity of the fill area. The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.
112
113**Widget capability**: This API can be used in ArkTS widgets since API version 9.
114
115**Atomic service API**: This API can be used in atomic services since API version 11.
116
117**System capability**: SystemCapability.ArkUI.ArkUI.Full
118
119**Parameters**
120
121| Name| Type                                                        | Mandatory| Description                          |
122| ------ | ------------------------------------------------------------ | ---- | ------------------------------ |
123| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Opacity of the fill area.<br>Default value: **1**|
124
125### stroke
126
127stroke(value: ResourceColor)
128
129Stroke color. If this attribute is not set, the component does not have any stroke. If the value is invalid, no stroke will be drawn.
130
131**Widget capability**: This API can be used in ArkTS widgets since API version 9.
132
133**Atomic service API**: This API can be used in atomic services since API version 11.
134
135**System capability**: SystemCapability.ArkUI.ArkUI.Full
136
137**Parameters**
138
139| Name| Type                                      | Mandatory| Description      |
140| ------ | ------------------------------------------ | ---- | ---------- |
141| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Stroke color.|
142
143### strokeDashArray
144
145strokeDashArray(value: Array&lt;any&gt;)
146
147Stroke dashes. An invalid value is handled as the default value.
148
149**Widget capability**: This API can be used in ArkTS widgets since API version 9.
150
151**Atomic service API**: This API can be used in atomic services since API version 11.
152
153**System capability**: SystemCapability.ArkUI.ArkUI.Full
154
155**Parameters**
156
157| Name| Type            | Mandatory| Description                     |
158| ------ | ---------------- | ---- | ------------------------- |
159| value  | Array&lt;any&gt; | Yes  | Stroke dashes.<br>Default value: **[]**|
160
161### strokeDashOffset
162
163strokeDashOffset(value: number | string)
164
165Sets the offset of the start point for drawing the stroke. An invalid value is handled as the default value.
166
167**Widget capability**: This API can be used in ArkTS widgets since API version 9.
168
169**Atomic service API**: This API can be used in atomic services since API version 11.
170
171**System capability**: SystemCapability.ArkUI.ArkUI.Full
172
173**Parameters**
174
175| Name| Type                      | Mandatory| Description                                |
176| ------ | -------------------------- | ---- | ------------------------------------ |
177| value  | number \| string | Yes  | Offset of the start point for drawing the stroke.<br>Default value: **0**|
178
179### strokeLineCap
180
181strokeLineCap(value: LineCapStyle)
182
183Cap style of the stroke.
184
185**Widget capability**: This API can be used in ArkTS widgets since API version 9.
186
187**Atomic service API**: This API can be used in atomic services since API version 11.
188
189**System capability**: SystemCapability.ArkUI.ArkUI.Full
190
191**Parameters**
192
193| Name| Type                                             | Mandatory| Description                                            |
194| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ |
195| value  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes  | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**|
196
197### strokeLineJoin
198
199strokeLineJoin(value: LineJoinStyle)
200
201Join style of the stroke.
202
203**Widget capability**: This API can be used in ArkTS widgets since API version 9.
204
205**Atomic service API**: This API can be used in atomic services since API version 11.
206
207**System capability**: SystemCapability.ArkUI.ArkUI.Full
208
209**Parameters**
210
211| Name| Type                                               | Mandatory| Description                                              |
212| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- |
213| value  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes  | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
214
215### strokeMiterLimit
216
217strokeMiterLimit(value: number | string)
218
219Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter. This attribute works only when **strokeLineJoin** is set to **LineJoinStyle.Miter**.
220
221The value must be greater than or equal to 1.0. If the value is in the [0, 1) range, the value **1.0** will be used. In other cases, the default value will be used.
222
223**Widget capability**: This API can be used in ArkTS widgets since API version 9.
224
225**Atomic service API**: This API can be used in atomic services since API version 11.
226
227**System capability**: SystemCapability.ArkUI.ArkUI.Full
228
229**Parameters**
230
231| Name| Type                      | Mandatory| Description                                          |
232| ------ | -------------------------- | ---- | ---------------------------------------------- |
233| value  | number \| string | Yes  | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Default value: **4**|
234
235### strokeOpacity
236
237strokeOpacity(value: number | string | Resource)
238
239Stroke opacity. The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**.
240
241**Widget capability**: This API can be used in ArkTS widgets since API version 9.
242
243**Atomic service API**: This API can be used in atomic services since API version 11.
244
245**System capability**: SystemCapability.ArkUI.ArkUI.Full
246
247**Parameters**
248
249| Name| Type                                                        | Mandatory| Description                      |
250| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
251| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Stroke opacity.<br>Default value: **1**|
252
253### strokeWidth
254
255strokeWidth(value: Length)
256
257Stroke width. If of the string type, this parameter cannot be set in percentage. A percentage is processed as 1 px.
258
259**Widget capability**: This API can be used in ArkTS widgets since API version 9.
260
261**Atomic service API**: This API can be used in atomic services since API version 11.
262
263**System capability**: SystemCapability.ArkUI.ArkUI.Full
264
265**Parameters**
266
267| Name| Type                        | Mandatory| Description                    |
268| ------ | ---------------------------- | ---- | ------------------------ |
269| value  | [Length](ts-types.md#length) | Yes  | Stroke width.<br>Default value: **1**|
270
271### antiAlias
272
273antiAlias(value: boolean)
274
275Specifies whether anti-aliasing is enabled.
276
277**Widget capability**: This API can be used in ArkTS widgets since API version 9.
278
279**Atomic service API**: This API can be used in atomic services since API version 11.
280
281**System capability**: SystemCapability.ArkUI.ArkUI.Full
282
283**Parameters**
284
285| Name| Type   | Mandatory| Description                                 |
286| ------ | ------- | ---- | ------------------------------------- |
287| value  | boolean | Yes  | Whether anti-aliasing is enabled.<br>Default value: **true**|
288
289## Example
290### Example 1
291
292```ts
293// xxx.ets
294@Entry
295@Component
296struct RectExample {
297  build() {
298    Column({ space: 10 }) {
299      Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%')
300      // Draw a 90% x 50 rectangle.
301      Column({ space: 5 }) {
302        Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
303        // Draw a 90% x 50 rectangle.
304        Rect({ width: '90%', height: 50 })
305          .fill(Color.Pink)
306        // Draw a 90% x 50 rectangle.
307        Rect()
308          .width('90%')
309          .height(50)
310          .fillOpacity(0)
311          .stroke(Color.Red)
312          .strokeWidth(3)
313
314        Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%')
315        // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being 40 and 20, respectively.
316        Rect({ width: '90%', height: 80 })
317          .radiusHeight(20)
318          .radiusWidth(40)
319          .fill(Color.Pink)
320        // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being both 20.
321        Rect({ width: '90%', height: 80 })
322          .radius(20)
323          .fill(Color.Pink)
324          .stroke(Color.Transparent)
325      }.width('100%').margin({ top: 10 })
326      // Draw a 90% x 50 rectangle, with the width and height of its rounded corners as follows: 40 for the upper left rounded corner, 20 for the upper right rounded corner, 40 for the lower right rounded corner, and 20 for the lower left rounded corner.
327      Rect({ width: '90%', height: 80 })
328        .radius([[40, 40], [20, 20], [40, 40], [20, 20]])
329        .fill(Color.Pink)
330    }.width('100%').margin({ top: 5 })
331  }
332}
333```
334
335![en-us_image_0000001174264386](figures/en-us_image_0000001174264386.png)
336
337### Example 2
338
339```ts
340// xxx.ets
341@Entry
342@Component
343struct RectExample {
344  build() {
345    Column({ space: 10 }) {
346      Column()
347        .width(100)
348        .height(100)
349        .linearGradient({
350          direction: GradientDirection.Right,
351          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
352        })
353        .clipShape(new Rect({ width: 100, height: 100, radius: 40 }))
354      Rect()
355        .width(100)
356        .height(100)
357          // Set the color of the fill area. To display the color gradient of the background, set .fillOpacity(0.0).
358        .fill(Color.Pink)
359          // Set the radius of the rounded corner to 40.
360        .radius(40)
361        .stroke(Color.Black)
362          // Set the color gradient. It takes effect only for a 100 x 100 rectangular area. The boundary of the gradient does not contain rounded corners.
363        .linearGradient({
364          direction: GradientDirection.Right,
365          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
366        })
367    }
368  }
369}
370```
371
372![en-us_image_0000001174264386](figures/en-us_image_0000001174264387.jpeg)
373