Ellipse
The <Ellipse> component is used to draw an ellipse.
NOTE
This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Child Components
Not supported
APIs
Ellipse(options?: {width?: string | number, height?: string | number})
Since API version 9, this API is supported in ArkTS widgets.
Parameters
Name | Type | Mandatory | Description |
---|---|---|---|
width | string | number | No | Width. Default value: 0 |
height | string | number | No | Height. Default value: 0 |
Attributes
In addition to the universal attributes, the following attributes are supported.
Name | Type | Default Value | Description |
---|---|---|---|
fill | ResourceColor | Color.Black | Color of the fill area. Since API version 9, this API is supported in ArkTS widgets. |
fillOpacity | number | string | Resource | 1 | Opacity of the fill area. Since API version 9, this API is supported in ArkTS widgets. |
stroke | ResourceColor | - | Stroke color. If this attribute is not set, the component does not have any stroke. Since API version 9, this API is supported in ArkTS widgets. |
strokeDashArray | Array<Length> | [] | Stroke dashes. Since API version 9, this API is supported in ArkTS widgets. |
strokeDashOffset | number | string | 0 | Offset of the start point for drawing the stroke. Since API version 9, this API is supported in ArkTS widgets. |
strokeLineCap | LineCapStyle | LineCapStyle.Butt | Cap style of the stroke. Since API version 9, this API is supported in ArkTS widgets. |
strokeLineJoin | LineJoinStyle | LineJoinStyle.Miter | Join style of the stroke. Since API version 9, this API is supported in ArkTS widgets. NOTE This attribute does not work for the <ellipse> component, which does not have corners. |
strokeMiterLimit | number | string | 4 | Limit on the ratio of the miter length to the value of strokeWidth used to draw a miter join. Since API version 9, this API is supported in ArkTS widgets. NOTE This attribute does not take effect for the <Ellipse> component, because it does not have a miter join. |
strokeOpacity | number | string | Resource | 1 | Stroke opacity. Since API version 9, this API is supported in ArkTS widgets. NOTE 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. |
strokeWidth | Length | 1 | Stroke width. Since API version 9, this API is supported in ArkTS widgets. NOTE The value cannot be a percentage. |
antiAlias | boolean | true | Whether anti-aliasing is enabled. Since API version 9, this API is supported in ArkTS widgets. |
Example
// xxx.ets
@Entry
@Component
struct EllipseExample {
build() {
Column({ space: 10 }) {
// Draw a 150 x 80 ellipse.
Ellipse({ width: 150, height: 80 })
// Draw a 150 x 100 ellipse with blue strokes.
Ellipse()
.width(150)
.height(100)
.fillOpacity(0)
.stroke(Color.Blue)
.strokeWidth(3)
}.width('100%')
}
}