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.