HarmonyOS Development: Using Circle to Draw Circle

Foreword

this article is based on Api13

in the previous article, we used the Rect component to achieve the rectangular effect. In this article, we continue to explore the Middle Circle of geometric figures. There are many forms to achieve rectangles. Similarly, circles also have many forms. In the previous article, we also made several simple cases. For example, we want to achieve a solid circle with a radius of 50. How do we achieve it?

Very simple, we can use the borderRadius attribute to achieve, with backgroundColor, the code case is as follows:

Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
        .borderRadius(100)

the effect is as follows:

the above is a solid fill. If you want to realize the outline of the border, that is, the ring effect, you only need to change the backgroundColor to border.

Column()
        .width(100)
        .height(100)
        .border({ width: 1, color: Color.Pink })
        .borderRadius(100)

The effect is as follows:

in addition to the above implementation, we can also draw through Canvas, but this article takes another implementation, that is, the Circle circular component.

Circle Round Components

Circle is a component used to draw circles. Like the Rect component, it also provides many properties and methods to achieve different effects.

Name	type	required	description
width	string /number	no	width, value range ≥ 0.
height	string /number	No	height, value range ≥ 0.

In addition to properties, the following methods are also supported:

Method	parameters	overview
fill	ResourceColor	Fill area color. Default value: Color.Black
fillOpacity	number /string/ Resource	fill area transparency. Default value: 1
stroke	ResourceColor	the border color.
strokeDashArray	Array	Sets the border gap. Value range ≥ 0
strokeDashOffset	number/string	the offset from which the border is drawn
strokeLineCap	LineCapStyle	border Endpoint Draw Style
strokeLineJoin	LineJoinStyle	border Corner Draw Style
strokeMiterLimit	number/string	limit value for ratio of miter length to border width
strokeOpacity	number/string/Resource	border Transparency
strokeWidth	Length	border width, value range ≥ 0
antiAlias	boolean	whether to turn on the anti-aliasing effect

draw a solid circle

draw a solid circle, set by the fill property, for example, to achieve a solid circle with a diameter of 100, the code is as follows:

      Circle()
        .width(100)
        .height(100)
        .fill(Color.Pink)

the effect is as follows:

draw a hollow circle

hollow circle, need to pay attention to, must be set the fullopacity property, otherwise it will not take effect; For example, set a circle with a radius of 100 and a border of 5:

Circle()
        .width(100)
        .height(100)
        .stroke(Color.Pink)
        .strokeWidth(5)
        .fillOpacity(0)

the effect is as follows:

border gap

we can pass the attribute strokeDashArray sets our drawing gap. The code case is as follows:

 Circle()
        .width(100)
        .height(100)
        .stroke(Color.Pink)
        .strokeWidth(5)
        .fillOpacity(0)
        .strokeDashArray([1, 2])

the effect is as follows:

Related Summary

whether you draw a rectangle or a circle, you can do it as an understanding. In scenes that need to be used, you can use it reasonably. After all, ready-made components are much simpler than implementing them in other ways.