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

程序员一鸣

发布于 2025-3-31 19:44

浏览

0收藏

前言

本文基于Api13

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

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

Column()
        .width(100)
        .height(100)
        .backgroundColor(Color.Pink)
        .borderRadius(100)1.
2.
3.
4.
5.

效果如下：

鸿蒙开发：使用Circle绘制圆形-鸿蒙开发者社区

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

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

效果如下：

鸿蒙开发：使用Circle绘制圆形-鸿蒙开发者社区

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

Circle圆形组件

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

名称	类型	必填	说明
width	string /number	否	宽度，取值范围≥0。
height	string /number	否	高度，取值范围≥0。

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

方法	参数	概述
fill	ResourceColor	填充区域颜色。默认值：Color.Black
fillOpacity	number /string/ Resource	填充区域透明度。默认值：1
stroke	ResourceColor	边框颜色。
strokeDashArray	Array<any>	设置边框间隙。取值范围≥0
strokeDashOffset	number/string	边框绘制起点的偏移量
strokeLineCap	LineCapStyle	边框端点绘制样式
strokeLineJoin	LineJoinStyle	边框拐角绘制样式
strokeMiterLimit	number/string	斜接长度与边框宽度比值的极限值
strokeOpacity	number/string/Resource	边框透明度
strokeWidth	Length	边框宽度，取值范围≥0
antiAlias	boolean	是否开启抗锯齿效果

绘制实心圆

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

      Circle()
        .width(100)
        .height(100)
        .fill(Color.Pink)1.
2.
3.
4.

效果如下：

鸿蒙开发：使用Circle绘制圆形-鸿蒙开发者社区

绘制空心圆

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

Circle()
        .width(100)
        .height(100)
        .stroke(Color.Pink)
        .strokeWidth(5)
        .fillOpacity(0)1.
2.
3.
4.
5.
6.

效果如下：

鸿蒙开发：使用Circle绘制圆形-鸿蒙开发者社区

边框间隙

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

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

效果如下：

鸿蒙开发：使用Circle绘制圆形-鸿蒙开发者社区