鸿蒙开发：使用Circle绘制圆形 原创

前言

本文基于Api13

上篇文章，我们使用Rect组件实现了矩形效果，本篇文章，我们继续探究几何图形的中圆形，实现矩形有多种形式，同样，圆形，也是有多种形式，在上篇的文章中也简单的做了几个案例，比如，我们要实现一个半径50的实心圆形，如何实现呢？

很简单，我们可以通过borderRadius属性来实现，搭配backgroundColor，代码案例如下：

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

效果如下：

以上是一个实心的填充，如果要实现边框轮廓，也就是圆环效果呢，只需要把backgroundColor改为border即可。

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

效果如下：

除了以上的实现方式之外，我们还可以通过Canvas来绘制，不过本篇文章采取另一种的实现方式，那就是Circle圆形组件。

Circle圆形组件

Circle，是用于绘制圆形的组件，和Rect组件一样，也是提供了很多了属性和方法，可以实现不同的效果。

除了属性之外，也支持以下的方法：

绘制实心圆

绘制一个实心圆，通过fill属性设置，比如，实现一个直径为100的实心圆，代码如下：

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

效果如下：

绘制空心圆

空心圆，需要注意，必须要设置fillOpacity属性，否则不生效；比如，设置一个半径为100，边框为5的圆环：

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

效果如下：

边框间隙

我们可以通过属性strokeDashArray设置我们的绘制间隙，代码案例如下：

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

效果如下：

相关总结

绘制矩形也好，圆形也好，大家做为一个了解即可，在有需要用到的场景中，合理的使用即可，毕竟现成的组件，要比自己用别的方式实现要简单的多。