2024年鸿蒙最新HarmonyOS Next 使用绘制组件实现自定义进度动画(1)，2024年最新鸿蒙面试题目 非笔试

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

.strokeWidth($r("app.integer.outer_circle_stroke_width"))

1. 绘制中间的进度的填充。中间的填充有两个状态：1、在进度100%时是填充颜色的圆形；2、在进度不足100%时，使用Path组件绘制闭合曲线实现。源码参考[PaintComponent.ets]( )。

// 进度展示
Circle({ width: Constants.DIAMETER, height: Constants.DIAMETER })
.fill(this.bgColor)

// TODO:知识点:使用Path组件绘制封闭曲线，实现水位线效果
Path()
.width(Constants.DIAMETER)
.height(Constants.DIAMETER)
.commands(this.pathCommands)
.fill(this.colorBackgroundFill)
.antiAlias(true)
.stroke(this.colorBackgroundFill)
.strokeWidth($r(“app.integer.path_stroke_width”))

1. 计算封闭曲线。水位线的端点的纵坐标y与进度k的关系为：y=(1-k)\*2r，而圆心坐标为(r,r)，以此确定水位线的坐标，然后拼接成绘制封闭曲线的commands。源码参考[PaintComponent.ets]( )。

/**

• 根据进度拿到水位线的端点的纵坐标
• @param progressPercent 进度百分比
• @returns 水位线的端点的纵坐标
  */
  getOrdinate(progressPercent: number): number {
  return (Constants.UNIT_ONE - progressPercent) * (Constants.RADIUS_IN_PX + Constants.RADIUS_IN_PX);
  }

/**

• 根据圆心，以及纵坐标拿到水位线两个端点的距离的平方
• @param ordinate 纵坐标
• @returns 端点间距离的平方
  */
  getDistanceSquare(ordinate: number): number {
  return Constants.RADIUS_IN_PX * Constants.RADIUS_IN_PX - (ordinate - Constants.RADIUS_IN_PX) * (ordinate - Constants.RADIUS_IN_PX);
  }

/**

• 计算闭合曲线
• @param progressNum 进度
• @returns 绘制闭合曲线的commands
  */
  getPathCommands(progressNum: number): string {
  // 拿到水位线的端点的纵坐标
  const ordinate: number = this.getOrdinate(progressNum / Constants.PERCENT_RATE);
  // 拿到端点之间的距离的平方
  const distanceSquare: number = this.getDistanceSquare(ordinate);
  if (distanceSquare >= Constants.ZERO) {
  // 开平方得到端点间的距离
  const distance: number = Math.sqrt(distanceSquare);
  // 计算得出第一个端点的横坐标
  const firstAbscissa: number = Constants.RADIUS_IN_PX - distance;
  // 计算得到第二个端点的横坐标
  const secondAbscissa: number = Constants.RADIUS_IN_PX + distance;
  return this.formatPathCommands