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})

Parameters

Name	Type	Mandatory	Default Value	Description
width	string \| number	No	0	Width.
height	string \| number	No	0	Height.

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.
fillOpacity	number \| string \| Resource	1	Opacity of the fill area.
stroke	ResourceColor	-	Stroke color. If this attribute is not set, the component does not have any stroke.
strokeDashArray	Array<Length>	[]	Stroke dashes.
strokeDashOffset	number \| string	0	Offset of the start point for drawing the stroke.
strokeLineCap	LineCapStyle	LineCapStyle.Butt	Cap style of the stroke.
strokeLineJoin	LineJoinStyle	LineJoinStyle.Miter	Join style of the stroke.
strokeMiterLimit	number \| string	4	Limit on the ratio of the miter length to the value of strokeWidth used to draw a miter join. 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. 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.
antiAlias	boolean	true	Whether anti-aliasing is enabled.

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%')
  }
}

en-us_image_0000001174104394