CircleProgressView 鸿蒙ArkTS自定义View实现圆形进度条

上篇的截图中除了一个上下的箭头，还有一个圆形进度条，今天我们来讲讲这个如何进行实现

我们看这个图形的构造，其实很简单：一个圆形图形，以及一个文本来显示进度 所以我们用一个层叠布局
绘制一个带颜色的圆形，然后在放一个文本来显示进度即可。具体的实现看下面这个实现过程

实现步骤

1. 定义组件结构：

   • 使用 @Component 装饰器定义 CircleProgressView 结构体。

2. 声明属性：

• progress: 数字，当前进度值（0-100），默认为 0
• color: 字符串，进度条颜色，默认为 ‘#1989fa’
• layerColor: 字符串，背景圆环颜色，默认为 ‘#ebedf0’
• circleSize: 数字，圆形进度条的大小（宽度和高度），默认为 100
• strokeWidth: 数字，圆环的线条宽度，默认为 4
• clockwise: 布尔值，进度是否顺时针增加，默认为 true

其中 我们 @State 装饰器来设置 progress 状态。用 @Prop 装饰器定义其他可配置属性。
装饰器的作用是通过数据来驱动UI，当数据变更后UI上的值也将变化，关于鸿蒙中装饰器的使用详见鸿蒙官方文档

3. 初始化绘图上下文：

   • 创建 RenderingContextSettings 和 CanvasRenderingContext2D 实例。

4. 实现绘制圆形的辅助方法：

   • drawCircle 方法用于绘制圆形或圆弧。

5. 实现 build 方法：

   • 使用 Stack 组件作为容器，居中对齐内容。
   • 添加 Canvas 组件并设置其宽度和高度。
   • 在 onReady 回调中绘制背景圆和进度圆弧。
   • 添加 Text 组件显示进度百分比。

具体的代码实现如下:

@Component
export struct CircleProgressView {
   
   
  @State progress: number = 0
  @Prop color: string = '#1989fa'
  @Prop layerColor: string = '#ebedf0'
  @Prop circleSize: number = 100
  @Prop strokeWidth: number = 4
  @