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>} | 18 {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) 19 20Since API version 9, this API is supported in ArkTS widgets. 21 22**Parameters** 23 24| Name| Type| Mandatory| Default Value| Description| 25| -------- | -------- | -------- | -------- | -------- | 26| width | string \| number | No| 0 | Width.| 27| height | string \| number | No| 0 | Height.| 28| radius | string \| number \| Array<string \| number> | No| 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.| 29| radiusWidth | string \| number | No| 0 | Width of the rounded corner.| 30| radiusHeight | string \| number | No| 0 | Height of the rounded corner.| 31 32 33## Attributes 34 35In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 36 37| Name| Type| Default Value| Description| 38| -------- | -------- | -------- | -------- | 39| radiusWidth | string \| number | 0 | Width of the rounded corner. The width and height are the same when only the width is set.<br>Since API version 9, this API is supported in ArkTS widgets.| 40| radiusHeight | string \| number | 0 | Height of the rounded corner. The width and height are the same only when the height is set.<br>Since API version 9, this API is supported in ArkTS widgets.| 41| radius | string \| number \| Array<string \| number> | 0 | Radius of the rounded corner. You can set separate radiuses for four rounded corners.<br>Since API version 9, this API is supported in ArkTS widgets.| 42| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.<br>Since API version 9, this API is supported in ArkTS widgets.| 43| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>Since API version 9, this API is supported in ArkTS widgets.| 44| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.<br>Since API version 9, this API is supported in ArkTS widgets.| 45| strokeDashArray | Array<Length> | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.| 46| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.| 47| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.| 48| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.| 49| strokeMiterLimit | number \| string | 4 | Limit 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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.<br>Since API version 9, this API is supported in ArkTS widgets.| 50| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.<br>Since API version 9, this API is supported in ArkTS widgets.| 51| strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The value cannot be a percentage.| 52| antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.| 53 54 55## Example 56 57```ts 58// xxx.ets 59@Entry 60@Component 61struct RectExample { 62 build() { 63 Column({ space: 10 }) { 64 Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%') 65 // Draw a 90% x 50 rectangle. 66 Column({ space: 5 }) { 67 Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') 68 // Draw a 90% x 50 rectangle. 69 Rect({ width: '90%', height: 50 }) 70 .fill(Color.Pink) 71 // Draw a 90% x 50 rectangle. 72 Rect() 73 .width('90%') 74 .height(50) 75 .fillOpacity(0) 76 .stroke(Color.Red) 77 .strokeWidth(3) 78 79 Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%') 80 // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being 40 and 20, respectively. 81 Rect({ width: '90%', height: 80 }) 82 .radiusHeight(20) 83 .radiusWidth(40) 84 .fill(Color.Pink) 85 // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being both 20. 86 Rect({ width: '90%', height: 80 }) 87 .radius(20) 88 .fill(Color.Pink) 89 .stroke(Color.Transparent) 90 }.width('100%').margin({ top: 10 }) 91 // 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. 92 Rect({ width: '90%', height: 80 }) 93 .radius([[40, 40], [20, 20], [40, 40], [20, 20]]) 94 .fill(Color.Pink) 95 }.width('100%').margin({ top: 5 }) 96 } 97} 98``` 99 100 101
