HarmonyOS 如何使用自定义图片实现环形进度条？

Question

如何使用自定义图片实现环形进度条，progress组件或者路径绘制组件没看到能使用自定义图片的参数，资源和效果如图所示

Answer 1

参考代码：

import { CircleShape, PathShape } from '@kit.ArkUI';

@Entry
@Component
struct Index2 {
  @State message: string = 'Hello World';
  @State @Watch('calcPosition') progress: number = 10; // 0-100
  @State largeCirclePosition: Position = { x: 0, y: 0 };
  @State smallCirclePosition: Position = { x: 0, y: 0 };
  private largeCircle: number = 200;
  private smallCircle: number = 170;

  aboutToAppear(): void {
    this.calcPosition()
  }

  calcPosition() {
    let argv = this.progress / 100 * 2 * Math.PI;
    let largeX = Math.sin(argv) * this.largeCircle + 200;
    let largeY = 200 - Math.cos(argv) * this.largeCircle;

    let smallX = Math.sin(argv) * this.smallCircle + 200;
    let smallY = 200 - Math.cos(argv) * this.smallCircle;

    this.largeCirclePosition = { x: largeX, y: largeY };
    this.smallCirclePosition = { x: smallX, y: smallY };

  }

  build() {
    Column() {
      Column()
        .width('400px')
        .height('400px')// .backgroundColor(Color.Red)
        .backgroundImage($rawfile('circle.png'))
        .backgroundImageSize(ImageSize.FILL)
        .clipShape(
          this.progress < 100 ? new PathShape({
            commands: `M200 0 A15 15 0 0 0 200 30 A170 170 0 ${this.progress / 100 < 0.5 ? 0 : 1} 1 ${this.smallCirclePosition.x} ${this.smallCirclePosition.y} A15 15 0 0 0 ${this.largeCirclePosition.x} ${this.largeCirclePosition.y} A200 200 0 ${this.progress / 100 < 0.5 ? 0 : 1} 0 200 0 Z`
          }) : new CircleShape({ width: '400px', height: '400px' })
        )

      Button('修改进度')
        .onClick(() => {
          this.progress += 10;
        })
    }
    .height('100%')
    .width('100%')
  }
}