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.<br>**NOTE**<br>An invalid value is handled as the default value.| 27| height | string \| number | No| 0 | Height.<br>**NOTE**<br>An invalid value is handled as the default value.| 28| radius | string \| number \| Array<string \| number> | No| 0 | Radius of the rounded corner. You can set separate radiuses for 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>**NOTE**<br>An invalid value is handled as the default value.| 29| radiusWidth | string \| number | No| 0 | Width of the rounded corner.<br>**NOTE**<br>An invalid value is handled as the default value.| 30| radiusHeight | string \| number | No| 0 | Height of the rounded corner.<br>**NOTE**<br>An invalid value is handled as the default value.| 31 32## Attributes 33 34In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 35 36| Name| Type| Default Value| Description| 37| -------- | -------- | -------- | -------- | 38| 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.<br>**NOTE**<br>An invalid value is handled as the default value.| 39| 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.<br>**NOTE**<br>An invalid value is handled as the default value.| 40| 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.<br>**NOTE**<br>An invalid value is handled as the default value.| 41| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>An invalid value is handled as the default value.| 42| 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.<br>**NOTE**<br>An invalid value is handled as the default value.| 43| 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.<br>**NOTE**<br>If the value is invalid, no stroke will be drawn.| 44| strokeDashArray | Array<Length> | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>An invalid value is handled as the default value.| 45| 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.<br>**NOTE**<br>An invalid value is handled as the default value.| 46| 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.| 47| 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.| 48| 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>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute works only when **strokeLineJoin** is set to **LineJoinStyle.Miter**.<br>The 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.| 49| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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**.| 50| 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.<br>An invalid value is handled as the default value.| 51| antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>An invalid value is handled as the default value.| 52 53## Example 54 55```ts 56// xxx.ets 57@Entry 58@Component 59struct RectExample { 60 build() { 61 Column({ space: 10 }) { 62 Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%') 63 // Draw a 90% x 50 rectangle. 64 Column({ space: 5 }) { 65 Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') 66 // Draw a 90% x 50 rectangle. 67 Rect({ width: '90%', height: 50 }) 68 .fill(Color.Pink) 69 // Draw a 90% x 50 rectangle. 70 Rect() 71 .width('90%') 72 .height(50) 73 .fillOpacity(0) 74 .stroke(Color.Red) 75 .strokeWidth(3) 76 77 Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%') 78 // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being 40 and 20, respectively. 79 Rect({ width: '90%', height: 80 }) 80 .radiusHeight(20) 81 .radiusWidth(40) 82 .fill(Color.Pink) 83 // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being both 20. 84 Rect({ width: '90%', height: 80 }) 85 .radius(20) 86 .fill(Color.Pink) 87 .stroke(Color.Transparent) 88 }.width('100%').margin({ top: 10 }) 89 // 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. 90 Rect({ width: '90%', height: 80 }) 91 .radius([[40, 40], [20, 20], [40, 40], [20, 20]]) 92 .fill(Color.Pink) 93 }.width('100%').margin({ top: 5 }) 94 } 95} 96``` 97 98 99
