HarmonyOS Development: Drawing Ellipse with Ellipse

Foreword

this article is based on Api13

in the previous two articles, we outlined the geometric rectangle and Circle, which are implemented using Rect and Circle components respectively. In this article, we introduce another geometric component, Ellipse, to implement an elliptical figure.

Ellipse is a graphics component used to draw ellipses in ArkUI framework. It supports basic functions such as filling, stroke, transparency adjustment, etc. Its core features include flexible layout, complex vector graphics (similar to SVG effect) can be used alone or nested in the parent Shape component, and dynamic attributes are also supported. Animation effects such as color gradient and size change can be realized through state variables.

Of course, to implement Ellipse, we can also draw through Canvas. Ellipse component is not the only choice.

Simple Case

to achieve a wide 200, high 100 ellipse, the code is as follows:

Ellipse({ width: 200, height: 100 })

the effect is as follows:

attribute Details

first of all, the Eclipse component supports common attributes, such as wide width, high height, etc. Of course, it also supports common events, such as click events, touch events, etc. In addition, it also has its own attributes. The more common attributes are as follows:

method	parameters	overview
fill	ResourceColor	set the color of the filled area
strokeWidth	Length	Border width, value range ≥ 0
antiAlias	boolean	whether to turn on the anti-aliasing effect

code Case

solid ellipse

the default is a solid ellipse, for example, implementing a solid ellipse with a wide 200, a high 100, and a pink background color.

Ellipse({ width: 200, height: 100 })
        .fill(Color.Pink)

The effect is as follows:

hollow ellipse

hollow ellipses need to be noted that the background color needs to be set to transparent, that is, the fullopacity attribute is set to 0.

Ellipse({ width: 200, height: 100 })
        .fillOpacity(0)
        .stroke(Color.Pink)

The effect is as follows:

above, you can use strokeWidth to set the thickness of the border.

Combine the Shape component (vector effect)

some other effects can be achieved by combining the Shape component, such as viewport, to set the viewport of the Shape.

Shape() {
  Ellipse({ width: 200, height: 100 })
    .fillOpacity(0)
    .stroke(Color.Pink)
    .strokeWidth(5)
}
.viewPort({
  x: 0,
  y: 0,
  width: 100,
  height: 50
})

Precautions

Ellipse is a very simple elliptical component. There are nothing specific to note, but there are still several things to note. The first is version compatibility. For example, if you want to use it in meta-service, you must use it in API11 and above. Also, when using strokeDashArray attribute, you must ensure the parameter is a numeric array, otherwise an error may be reported.

The second possibility is to pay attention to performance. Try to avoid frequently modifying the eclipse attribute in the callback of high-frequency update, and give priority to using @ State State variable to drive changes. For those complex graphics, it is recommended to use Shape to combine multiple drawing components instead of nesting multiple layers of eclipse.

The third is that when using the border, you need to set the transparency of the fill to 0 so that the border can be displayed.

Related Summary

in addition to using the Ellipse component to draw an Ellipse, we can also use Canvas to draw an Ellipse, but relatively speaking, it is still not as efficient as the Ellipse component. Therefore, if the Ellipse component can meet the requirements, the Ellipse component is still the main component.