OpenHarmony开发者论坛

标题: 如何实现圆形进度条？ [打印本页]
作者: Summer    时间: 2023-9-8 14:55
标题: 如何实现圆形进度条？

【问题描述】
应用开发过程中经常用到波纹进度条，常见的如充电进度、下载进度、上传进度等，这种是如何实现的呢？
(, 下载次数: 0)

【运行环境】
硬件：rk3568；  
IDE: DevEco Studio 3.1 Beta2；
SDK: Ohos_sdk_public 3.2.11.9(API Version 9 Release)；





作者: 三只小海豚    时间: 2023-10-17 14:48
标题: 如何实现圆形进度条？

运行环境
本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：
  • IDE: DevEco Studio 3.1 Beta2
  • SDK: Ohos_sdk_public 3.2.11.9(API Version 9 Release)

实现思路：
展示效果
(, 下载次数: 14)
完整代码
  1. const COLOR_TRANSPARENT = '#00000000'
  2. const COLOR_BACKGROUND_FILL = '#7ebede'

  4. const DIAMETER = 200;
  5. const RADIUS_IN_PX = vp2px(DIAMETER / 2.0);
  6. const BIG_DIAMETER = 220;


  9. @Entry
  10. @Component
  11. struct Page3 {
  12.   @State outSetValue: number = 0
  13.   @State pathCommands: string = ''
  14.   @State backGroundColor: string = '#00000000'

  16.   onPageShow() {
  17.     this.pathCommands = this.calPathCommands(this.outSetValue);
  18.   }

  20.   calXSquare(y: number) {
  21.     return RADIUS_IN_PX * RADIUS_IN_PX - (y - RADIUS_IN_PX) * (y - RADIUS_IN_PX);
  22.   }

  24.   calY(k: number) {
  25.     return (1 - k) * RADIUS_IN_PX * 2;
  26.   }

  28.   formatPathCommands(x1: number, x2: number, y: number, radius: number) {
  29.     return `M${x1} ${y} A${radius} ${radius} 0 ${y > RADIUS_IN_PX ? 0 : 1} 0  ${x2} ${y} `
  30.     + `Q${(x1 + 3 * x2) / 4} ${y + 12.5 * (x2 - x1) / radius}, ${(x1 + x2) / 2} ${y} T${x1} ${y}`
  31.   }

  33.   calPathCommands(value: number) {
  34.     let y = this.calY(value / 100.0)
  35.     let squareX = this.calXSquare(y)
  36.     if (squareX >= 0) {
  37.       let x = Math.sqrt(squareX);
  38.       let x1 = RADIUS_IN_PX - x;
  39.       let x2 = RADIUS_IN_PX + x;
  40.       return this.formatPathCommands(x1, x2, y, RADIUS_IN_PX);
  41.     }
  42.     return "";
  43.   }

  45.   aboutToAppear() {
  46.     this.test()
  47.   }
  48.   test() {
  49.     let timer = setInterval(() => {
  50.       if (this.outSetValue < 100) {
  51.         this.outSetValue += 1
  52.         if (this.outSetValue == 100) {
  53.           this.backGroundColor = COLOR_BACKGROUND_FILL
  54.           this.pathCommands = '';
  55.         } else {
  56.           this.backGroundColor = COLOR_TRANSPARENT
  57.           this.pathCommands = this.calPathCommands(this.outSetValue);
  58.         }
  59.       } else {
  60.         clearInterval(timer)
  61.       }
  62.     }, 100)
  63.   }
  64.   build() {

  66.     Column() {
  67.       Column() {
  68.         Stack() {
  69.           // 外框圆环
  70.           Circle({ width: BIG_DIAMETER, height: BIG_DIAMETER })
  71.             .fill(COLOR_TRANSPARENT)
  72.             .stroke('#007DFF')
  73.             .strokeWidth(5)
  74.           // 进度显示

  76.           Circle({ width: DIAMETER, height: DIAMETER })
  77.             .fill(this.backGroundColor)
  78.           Path()
  79.             .width(DIAMETER)
  80.             .height(DIAMETER)
  81.             .commands(this.pathCommands)
  82.             .fill(COLOR_BACKGROUND_FILL)

  84.           // 进度
  85.           Text(this.outSetValue.toFixed(0) + "%")
  86.             .fontSize(60)


  89.         }.width(BIG_DIAMETER)
  90.         .height(BIG_DIAMETER)


  93.         Row() {
  94.           Slider({
  95.             value: this.outSetValue,
  96.             min: 0,
  97.             max: 100,
  98.             step: 1,
  99.             style: SliderStyle.OutSet
  100.           })
  101.             .blockColor('#FFFFFF')
  102.             .trackColor('#182431')
  103.             .selectedColor('#007DFF')
  104.             .showSteps(true)
  105.             .showTips(true)
  106.             .onChange((value: number, mode: SliderChangeMode) => {
  107.               if(this.outSetValue == 0) {
  108.                 this.test()
  109.               }
  110.               this.outSetValue = value
  111.               if (this.outSetValue == 100) {
  112.                 this.backGroundColor = COLOR_BACKGROUND_FILL
  113.                 this.pathCommands = '';
  114.               } else {
  115.                 this.backGroundColor = COLOR_TRANSPARENT
  116.                 this.pathCommands = this.calPathCommands(this.outSetValue);
  117.               }
  118.               console.log(`value = ${value} ->` + this.pathCommands);
  119.             })
  120.           Text(this.outSetValue.toFixed(0)).fontSize(16)
  121.         }
  122.         .padding({ top: 50 })
  123.         .width('80%')

  125.       }.width('100%')
  126.     }
  127.     .height('100%')
  128.     .justifyContent(FlexAlign.Center)
  129.   }
  130. }
复制代码


作者: 秃瓢二大爷    时间: 2023-11-22 10:23
回复 三只小海豚: 单走一个666666666



欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5