鸿蒙开发:使用Circle绘制圆形（鸿蒙圆角）

zhezhongyun 2025-06-09 07:23 40 浏览

前言

本文基于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组件一样，也是提供了很多了属性和方法，可以实现不同的效果。

名称	类型	必填	说明
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)

效果如下：

绘制空心圆

空心圆，需要注意，必须要设置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])

效果如下：

鸿蒙开发:使用Circle绘制圆形（鸿蒙圆角）

前言

Circle圆形组件

绘制实心圆

绘制空心圆

边框间隙

相关总结

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）

怎么用三种代码写「九九乘法表」（如何编写九九乘法表的程序）

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」

旧手机新玩法，MacroDeck进阶指南