HarmonyOS 鸿蒙Next求助：时间进度条怎么搞？

1. 实现时间卡尺模型：

if(this.divisorMode == TimeBarViewModel.MODE_HOUR) {
   //小时模式
   //中心点距离左边所占用的时长
   this.middleLineDuration = Math.floor((this.viewWidth / 2) * (TimeBarViewModel.TEN_MINUTE / this.divisorWidth))
   //计算屏幕最左边的时间
   this.leftTime = this.middleLineMillis - this.middleLineDuration
   //计算左边第一个刻度线的位置
   //由原来Java代码中的Math.ceil改成Math.floor，解决分钟模式下左侧不绘制刻度问题
   minuteNum = Math.floor(this.leftTime / TimeBarViewModel.TEN_MINUTE)
   xPosition =
     ((minuteNum * TimeBarViewModel.TEN_MINUTE) - this.leftTime) * (this.divisorWidth / TimeBarViewModel.TEN_MINUTE)
 } else if (this.divisorMode == TimeBarViewModel.MODE_MINUTE) {
   //分钟模式
   ...
 }
 //计算左边第一个刻度线是今天的第多少个分钟数
 for (let i = 0; i < scaleNum; i++) {
   if (this.divisorMode == TimeBarViewModel.MODE_HOUR) {
     //小时级别的画法
     if (minuteNum % 6 == 0) { //大刻度
       //画上面的大刻度

       this.scalePaint!.beginPath()
       this.scalePaint!.moveTo(xPosition + i * this.divisorWidth, this.viewHeight - this.scaleHeight * 2)
       this.scalePaint!.lineTo(xPosition + i * this.divisorWidth, this.viewHeight)
       this.scalePaint!.stroke()

       let hourMinute = this.getHourMinute(minuteNum)
       let timeStrWidth = this.scalePaint!.measureText(hourMinute).width
       this.timeStrHeight = this.scalePaint!.measureText(hourMinute).height
       //画出时间文字
       this.scalePaint!.fillText(hourMinute, xPosition + i * this.divisorWidth - timeStrWidth / 2,
         this.viewHeight - (this.scaleHeight * 2 + this.timeStrHeight))

     } else {
       //画上面的小刻度
       this.scalePaint!.beginPath()
       this.scalePaint!.moveTo(xPosition + i * this.divisorWidth, this.viewHeight - this.scaleHeight)
       this.scalePaint!.lineTo(xPosition + i * this.divisorWidth, this.viewHeight)
       this.scalePaint!.stroke()
     }
   } else if (this.divisorMode == TimeBarViewModel.MODE_MINUTE) {
     //分钟级别的画法
     ...
   }
   //每一格刻度代表10分钟
   if (this.divisorMode == TimeBarViewModel.MODE_HOUR) {
     minuteNum++;
   } else if(this.divisorMode == TimeBarViewModel.MODE_MINUTE) {
     secondNum++;
   }

在onPanActionEnd手势动作函数钟，通过middleLineMillis和videoCaliperInfo实现视频进度同步

// 视频同步
this.videoInfoList.forEach((video, index) => {
   video.isPlayed = this.hasVideoPlayed(index);
   if(video.isPlayed) {
     this.controller.setCurrentTime(Math.floor((this.middleLineMillis - video.caliperBeginStamp)/1000))
   }
})

完整代码：

import { RecordSegment } from './RecordSegment'
import { TimeBarView } from './TimeBarView'
import { TimeBarViewModel } from './TimeBarViewModel';
import List from '@ohos.util.List';
import dayJs from 'dayjs'
import { VideoCaliperInfo } from '../utils/VideoCaliperInfo';

@Entry
@Component
struct Index {
  @State private model: TimeBarViewModel = new TimeBarViewModel();
  @State currentTime: number = 0


  aboutToAppear(): void {
    let videos: List<VideoCaliperInfo> = new List();
    let beginTime1: number = this.model.yyyy_MM_dd_T_HH_mm_SSSZToCalendar('2024-05-13T23:37:16.000+08:00').getTime();
    let beginTime2: number = this.model.yyyy_MM_dd_T_HH_mm_SSSZToCalendar('2024-05-14T03:10:24.000+08:00').getTime();
    let endTime1: number = this.model.yyyy_MM_dd_T_HH_mm_SSSZToCalendar('2024-05-13T23:37:29.000+08:00').getTime();
    let endTime2: number = this.model.yyyy_MM_dd_T_HH_mm_SSSZToCalendar('2024-05-14T03:10:58.000+08:00').getTime();
    let videoOptions1: VideoOptions = { src:$rawfile('1.mp4'), controller:this.model.controller }
    let videoOptions2: VideoOptions = { src:$rawfile('3.mp4'), controller:this.model.controller }
    let videoCaliperInfo1: VideoCaliperInfo = new VideoCaliperInfo(videoOptions1, beginTime1, endTime1, false)
    let videoCaliperInfo2: VideoCaliperInfo = new VideoCaliperInfo(videoOptions2, beginTime2, endTime2, false)
    videos.add(videoCaliperInfo1);
    videos.add(videoCaliperInfo2);

    let fileInfoList: List<RecordSegment> = new List();
    let recordSegment1 = new RecordSegment()
    recordSegment1.recordType = 0
    recordSegment1.beginTime = '2024-05-13T23:37:16.000+08:00'
    recordSegment1.endTime = '2024-05-13T23:37:29.000+08:00'
    fileInfoList.add(recordSegment1)

    let recordSegment2 = new RecordSegment()
    recordSegment2.beginTime = '2024-05-14T03:10:24.000+08:00'
    recordSegment2.endTime = '2024-05-14T03:10:58.000+08:00'
    fileInfoList.add(recordSegment2)
    this.model.addFileInfoList(fileInfoList)

    this.model.addVideoInfoList(videos)
  }

  build() {
    Column() {
      Column(){
        Text('录像时间卡尺')
          .fontSize('30fp')
          .fontWeight(700)
          .margin({ top: '64vp' })
      }
      .width('100%')
      .height('20%')
      .margin({bottom:40})
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)

      Stack(){
        ForEach(this.model.getVideosList(), (video: VideoCaliperInfo, index: number) => {
          if(video.isPlayed) {
            Video(video.videoOption)
              .controls(false)
              .autoPlay(true)
          }
        })
      }
      .margin({bottom:20})
      .height('30%')

      Column(){
        Text(dayJs(new Date(this.model.middleLineMillis)).format('YYYY-MM-DD HH:mm:ss'))
          .padding(15)
        TimeBarView({ model: this.model })
      }
      .height('30%')
    }
    .width('100%')
    .height('100%')
  }
}