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