canvas绘制弧形进度条-实战（canvas进度条流动效果）

开源项目地址：canvasCircle: 【鸿蒙 Harmony Next 示例 代码】本示例基于CanvasRenderingContext2D和三角函数实现了一个环形的可拖拽进度条，来提升用户的体验度

核心代码分析：

import { hilog } from "@kit.PerformanceAnalysisKit";

@Entry
@Component
export  struct test {
  @State angel: number = 3 * Math.PI / 4;
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private radius: number = 120;
  private centerX: number = 0;
  private centerY: number = 0;
  @State angelNum:string ='0';

  draw() {
    // 清空绘制区域内容
    this.context.clearRect(0, 0, this.context.width, this.context.height)

    // 创建绘制路径
    this.context.beginPath()
    // arc 绘制弧形路径，参数 中心点x坐标，中心点y坐标，弧形的圆半径，弧线的起始弧度，弧线的终止弧度，是否逆时针绘制
    this.context.arc(this.centerX, this.centerY, this.radius, 3 * Math.PI / 4, 9 * Math.PI / 4,false)
    // 线宽
    this.context.lineWidth = 13
    // 线端点圆角
    this.context.lineCap = 'round'
    // 绘制颜色
    this.context.strokeStyle = Color.Gray
    // 绘制
    this.context.stroke()
    if (this.angel === 3 * Math.PI / 4) {
      return;
    }
    // 对存储的画笔进行恢复
    this.context.restore()
    // 绘制进度条
    this.context.beginPath()
    this.context.arc(this.centerX, this.centerY, this.radius, 3 * Math.PI / 4, this.angel);
    this.context.strokeStyle = Color.Blue
    this.context.lineCap = 'round'
    this.context.lineWidth = 13
    this.context.stroke()

  }
  build() {
    Column() {
      Stack(){
        Canvas(this.context)
          .width(300)
          .height(300)
          .onReady(() => {
            this.centerX = this.context.width / 2;
            this.centerY = this.context.height / 2;
            this.draw()
          })
          // 动态修改绘制的角度
          .onTouch((event) => {
            // 坐标转换
            let x = event.touches[0].x - this.centerX;
            let y = event.touches[0].y - this.centerY;

            let d = x * x + y * y;
            let mistakeScale = 10; //误差范围
            let min = (this.radius - mistakeScale) * (this.radius - mistakeScale);
            let max = (this.radius + 13 + mistakeScale) * (this.radius + 13 + mistakeScale);
            hilog.info(0x0000,'shepeng d = ' + d + '; min = ' + min + '; max = ' + max,'');
            if (d > max || d < min) {
              return;
            }

            // 从圆点到坐标(x,y)的向量与x轴正向之间的夹角
            this.angel = Math.atan2(y, x);
            // 四分之PI 到 四分之三PI 是 圆的下面空白的部分
          
            if (this.angel > Math.PI / 4 && this.angel < 3 * Math.PI / 4) {
              return;
            } else if (this.angel >= 0 && this.angel <= Math.PI / 4) {
              // 0 到 四分之PI 之间 是圆的右下圆弧部分
              // 计算规则 180 -> 对应 PI 的长度；x -> angle 的长度；225 是 上面的180 + 左下的45；

              this.angelNum =  (this.angel * (180 / Math.PI) + 225).toFixed(2)

            } else if (this.angel < 0) {
              // 圆的上半部分，包括左上和右上
              // 135 是 下面的空白部分 90 + 右下的45；360 是整个圆 计算的结果就是进度条的长度
              this.angelNum =  (this.angel * (180 / Math.PI) - 135 + 360).toFixed(2)
            } else {
              // 圆的左下圆弧部分
              // 135 是 下面的空白部分 90 + 右下的45
              this.angelNum = (this.angel * (180 / Math.PI) - 135).toFixed(2)
            }
            this.draw()
          })
      }

      Text('Math.PI * 1/ 4：' + Math.PI * 1 / 4)
      Text('Math.PI * 3/ 4：' + Math.PI * 3 / 4)
      Text('Math.PI * 9/ 4：' + Math.PI * 9 / 4)
      Text('Math.PI：' + Math.PI)
      Text('angel：' + this.angel)
      Text('当前角度angelNum：' + this.angelNum)
    }.width("100%").height("100%").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}