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<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#resourcecolor) | 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 | [Length](ts-types.md#length) | 1 | Opacity of the fill area.<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**.<br>Since API version 9, this API is supported in ArkTS widgets.| 43| stroke | [ResourceColor](ts-types.md#resourcecolor) | - | 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](ts-types.md#length)> | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>Line segments may overlap when they intersect. 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 | [Length](ts-types.md#length) | 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](ts-types.md#length) | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>If of the string type, this parameter cannot be set in percentage. A percentage is processed as 1px.| 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### Example 1 55 56```ts 57// xxx.ets 58@Entry 59@Component 60struct RectExample { 61 build() { 62 Column({ space: 10 }) { 63 Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%') 64 // Draw a 90% x 50 rectangle. 65 Column({ space: 5 }) { 66 Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') 67 // Draw a 90% x 50 rectangle. 68 Rect({ width: '90%', height: 50 }) 69 .fill(Color.Pink) 70 // Draw a 90% x 50 rectangle. 71 Rect() 72 .width('90%') 73 .height(50) 74 .fillOpacity(0) 75 .stroke(Color.Red) 76 .strokeWidth(3) 77 78 Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%') 79 // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being 40 and 20, respectively. 80 Rect({ width: '90%', height: 80 }) 81 .radiusHeight(20) 82 .radiusWidth(40) 83 .fill(Color.Pink) 84 // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being both 20. 85 Rect({ width: '90%', height: 80 }) 86 .radius(20) 87 .fill(Color.Pink) 88 .stroke(Color.Transparent) 89 }.width('100%').margin({ top: 10 }) 90 // 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. 91 Rect({ width: '90%', height: 80 }) 92 .radius([[40, 40], [20, 20], [40, 40], [20, 20]]) 93 .fill(Color.Pink) 94 }.width('100%').margin({ top: 5 }) 95 } 96} 97``` 98 99 100 101### Example 2 102 103```ts 104// xxx.ets 105@Entry 106@Component 107struct RectExample { 108 build() { 109 Column({ space: 10 }) { 110 Column() 111 .width(100) 112 .height(100) 113 .linearGradient({ 114 direction: GradientDirection.Right, 115 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 116 }) 117 .clip(new Rect({ width: 100, height: 100, radius: 40 })) 118 Rect() 119 .width(100) 120 .height(100) 121 // Set the color of the fill area. To display the color gradient of the background, set .fillOpacity(0.0). 122 .fill(Color.Pink) 123 // Set the radius of the rounded corner to 40. 124 .radius(40) 125 .stroke(Color.Black) 126 // 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. 127 .linearGradient({ 128 direction: GradientDirection.Right, 129 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 130 }) 131 } 132 } 133} 134``` 135 136 137
