#鸿蒙通关秘籍#如何在HarmonyOS中使用Circle和Path组件实现动态进度显示？

在HarmonyOS中，可以通过使用Circle组件和Path组件来实现动态进度显示。以下是详细的实现步骤：

1. 使用Circle组件来绘制进度的外层圆环：

   Circle({ width: 200, height: 200 }) // 设置宽和高
      .fill("#00000000") // 设置圆环的填充颜色为透明
      .stroke("#FF0000") // 设置圆环的描边颜色
      .strokeWidth(10) // 设置圆环的描边宽度
   1.
   2.
   3.
   4.

   复制

2. 绘制中间的进度填充，可以在这个步骤通过判断进度100%时显示绿色圆形：

   Circle({ width: 180, height: 180 }) // 设置内部圆的大小
      .fill("#FF0000") // 设置填充颜色，随进度变化
   1.
   2.

   复制

3. 使用Path组件绘制进度未满时的水位线效果：

   Path()
      .width(180)
      .height(180)
      .commands("M90,0 L180,90 L90,180 L0,90 Z") // 根据进度动态生成
      .fill("#FF0000")
      .antiAlias(true)
      .stroke("#FF0000")
      .strokeWidth(5)
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.

   复制

4. 通过计算进度百分比动态生成水位线坐标：

   function getPathCommands(progress) {
      const ordinate = (1 - progress) * 180;
      const distance = Math.sqrt(90 * 90 - (ordinate - 90) * (ordinate - 90));
      const firstX = 90 - distance;
      const secondX = 90 + distance;
      return `M${firstX},${ordinate} A90,90 0 0,1 ${secondX},${ordinate} L${firstX},${ordinate}`;
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.

   复制

5. 显示进度百分比：

   Row() {
      Text("进度:")
         .fontColor("#000000")
         .fontSize(24)
      Text(progress.toFixed(0) + "%")
         .fontSize(30)
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.

   复制