1# Ellipse 2 3The **Ellipse** component is used to draw an ellipse. 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> This API can be used in atomic services since API version 11. 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17Ellipse(options?: EllipseOptions) 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| options | [EllipseOptions](ts-drawing-components-ellipse.md#ellipseoptions18) | No| Dimensions for drawing an ellipse.| 30 31## EllipseOptions<sup>18+</sup> 32Describes the dimensions for drawing an ellipse. 33 34**Widget capability**: This API can be used in ArkTS widgets since API version 18. 35 36**Atomic service API**: This API can be used in atomic services since API version 18. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40| Name| Type| Mandatory| Description| 41| -------- | -------- | -------- | -------- | 42| width | string \| number | No| Width. The value must be greater than or equal to 0.<br>Default value: **0**<br>Default unit: vp<br>An invalid value is handled as the default value.| 43| height | string \| number | No| Height. The value must be greater than or equal to 0.<br>Default value: **0**<br>Default unit: vp<br>An invalid value is handled as the default value.| 44 45## Attributes 46 47In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 48 49### fill 50 51fill(value: ResourceColor) 52 53Sets the color of the fill area. An invalid value is handled as the default value. If this attribute and the universal attribute **foregroundColor** are both set, whichever is set later takes effect. 54 55**Widget capability**: This API can be used in ArkTS widgets since API version 9. 56 57**Atomic service API**: This API can be used in atomic services since API version 11. 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61**Parameters** 62 63| Name| Type | Mandatory| Description | 64| ------ | ------------------------------------------ | ---- | -------------------------------------- | 65| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the fill area.<br>Default value: **Color.Black**| 66 67### fillOpacity 68 69fillOpacity(value: number | string | Resource) 70 71Sets the opacity 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**. 72 73**Widget capability**: This API can be used in ArkTS widgets since API version 9. 74 75**Atomic service API**: This API can be used in atomic services since API version 11. 76 77**System capability**: SystemCapability.ArkUI.ArkUI.Full 78 79**Parameters** 80 81| Name| Type | Mandatory| Description | 82| ------ | ------------------------------------------------------------ | ---- | ------------------------------ | 83| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Opacity of the fill area.<br>Default value: **1**| 84 85### stroke 86 87stroke(value: ResourceColor) 88 89Sets the stroke color. If this attribute is not set, the component does not have any stroke. If the value is invalid, no stroke will be drawn. 90 91**Widget capability**: This API can be used in ArkTS widgets since API version 9. 92 93**Atomic service API**: This API can be used in atomic services since API version 11. 94 95**System capability**: SystemCapability.ArkUI.ArkUI.Full 96 97**Parameters** 98 99| Name| Type | Mandatory| Description | 100| ------ | ------------------------------------------ | ---- | ---------- | 101| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Stroke color.| 102 103### strokeDashArray 104 105strokeDashArray(value: Array<any>) 106 107Sets stroke dashes. The value must be greater than or equal to 0. Invalid values are treated as the default value. 108 109**Widget capability**: This API can be used in ArkTS widgets since API version 9. 110 111**Atomic service API**: This API can be used in atomic services since API version 11. 112 113**System capability**: SystemCapability.ArkUI.ArkUI.Full 114 115**Parameters** 116 117| Name| Type | Mandatory| Description | 118| ------ | ---------------- | ---- | ------------------------- | 119| value | Array<any> | Yes | Stroke dashes.<br>Default value: **[]**<br>Default unit: vp| 120 121### strokeDashOffset 122 123strokeDashOffset(value: number | string) 124 125Sets the offset of the start point for drawing the stroke. An invalid value is handled as the default value. 126 127**Widget capability**: This API can be used in ArkTS widgets since API version 9. 128 129**Atomic service API**: This API can be used in atomic services since API version 11. 130 131**System capability**: SystemCapability.ArkUI.ArkUI.Full 132 133**Parameters** 134 135| Name| Type | Mandatory| Description | 136| ------ | -------------------------- | ---- | ------------------------------------ | 137| value | number \| string | Yes | Offset of the start point for drawing the stroke.<br>Default value: **0**<br>Default unit: vp| 138 139### strokeLineCap 140 141strokeLineCap(value: LineCapStyle) 142 143Sets the cap style of the stroke. 144 145**Widget capability**: This API can be used in ArkTS widgets since API version 9. 146 147**Atomic service API**: This API can be used in atomic services since API version 11. 148 149**System capability**: SystemCapability.ArkUI.ArkUI.Full 150 151**Parameters** 152 153| Name| Type | Mandatory| Description | 154| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ | 155| value | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**| 156 157### strokeLineJoin 158 159strokeLineJoin(value: LineJoinStyle) 160 161Sets the join style of the stroke. This attribute does not work for the **Ellipse** component, which does not have corners. 162 163**Widget capability**: This API can be used in ArkTS widgets since API version 9. 164 165**Atomic service API**: This API can be used in atomic services since API version 11. 166 167**System capability**: SystemCapability.ArkUI.ArkUI.Full 168 169**Parameters** 170 171| Name| Type | Mandatory| Description | 172| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- | 173| value | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**| 174 175### strokeMiterLimit 176 177strokeMiterLimit(value: number | string) 178 179Sets the limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. This attribute does not take effect for the **Ellipse** component, because it does not have a miter join. 180 181**Widget capability**: This API can be used in ArkTS widgets since API version 9. 182 183**Atomic service API**: This API can be used in atomic services since API version 11. 184 185**System capability**: SystemCapability.ArkUI.ArkUI.Full 186 187**Parameters** 188 189| Name| Type | Mandatory| Description | 190| ------ | -------------------------- | ---- | ---------------------------------------------- | 191| 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**| 192 193### strokeOpacity 194 195strokeOpacity(value: number | string | Resource) 196 197Sets the stroke 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**. 198 199**Widget capability**: This API can be used in ArkTS widgets since API version 9. 200 201**Atomic service API**: This API can be used in atomic services since API version 11. 202 203**System capability**: SystemCapability.ArkUI.ArkUI.Full 204 205**Parameters** 206 207| Name| Type | Mandatory| Description | 208| ------ | ------------------------------------------------------------ | ---- | -------------------------- | 209| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Stroke opacity.<br>Default value: **1**| 210 211### strokeWidth 212 213strokeWidth(value: Length) 214 215Sets the stroke width. If this attribute is of the string type, percentage values are not supported and will be treated as 1 px. 216 217**Widget capability**: This API can be used in ArkTS widgets since API version 9. 218 219**Atomic service API**: This API can be used in atomic services since API version 11. 220 221**System capability**: SystemCapability.ArkUI.ArkUI.Full 222 223**Parameters** 224 225| Name| Type | Mandatory| Description | 226| ------ | ---------------------------- | ---- | ------------------------ | 227| value | [Length](ts-types.md#length) | Yes | Stroke width. The value must be greater than or equal to 0.<br>Default value: **1**<br>Default unit: vp<br>An invalid value is handled as the default value.| 228 229### antiAlias 230 231antiAlias(value: boolean) 232 233Specifies whether anti-aliasing is enabled. 234 235**Widget capability**: This API can be used in ArkTS widgets since API version 9. 236 237**Atomic service API**: This API can be used in atomic services since API version 11. 238 239**System capability**: SystemCapability.ArkUI.ArkUI.Full 240 241**Parameters** 242 243| Name| Type | Mandatory| Description | 244| ------ | ------- | ---- | ------------------------------------- | 245| value | boolean | Yes | Whether anti-aliasing is enabled.<br>**true**: Anti-aliasing is enabled.<br>**false**: Anti-aliasing is disabled.<br>Default value: **true**| 246 247## Example 248 249This example demonstrates how to use **fillOpacity** and **stroke** to set the opacity and stroke color of an ellipse. 250 251```ts 252// xxx.ets 253@Entry 254@Component 255struct EllipseExample { 256 build() { 257 Column({ space: 10 }) { 258 // Draw a 150 x 80 ellipse. 259 Ellipse({ width: 150, height: 80 }) 260 // Draw a 150 x 100 ellipse with blue strokes. 261 Ellipse() 262 .width(150) 263 .height(100) 264 .fillOpacity(0) 265 .stroke(Color.Blue) 266 .strokeWidth(3) 267 }.width('100%') 268 } 269} 270``` 271 272 273
