鸿蒙开发自定义倒计时组件

目录

效果展示

实现代码

@Component
export struct CountdownView{
  private onFinish:() => void
  private startAngle:number = 0
  private duration:number = 3000
  private strokeColor:string
  private onceTime: number
  private progressAngle:number = 360
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private intervalId: number = 0
  updateAnim = ()=>{
    this.context.clearRect(0,0,this.context.width,this.context.height)
    this.context.strokeStyle = this.strokeColor
    this.progressAngle = this.progressAngle - 1
    this.context.lineCap = 'round'
    let lineWidth = this.context.width / 2 / 6
    this.context.lineWidth = lineWidth
    this.context.beginPath()
    let x = this.context.width / 2
    let y = this.context.height / 2
    let radius = this.context.width / 2 - lineWidth / 2
    this.context.font = this.context.width + 'px'
    this.context.textAlign = 'center'
    this.context.textBaseline = 'middle'
    let currentTime = (this.duration - (this.onceTime * (360 - this.progressAngle))) / 1000
    Logger.error("FFFF",currentTime + "")
    let currentShowTime = Math.ceil(currentTime) + ""
    this.context.fillText(currentShowTime, x, y)
    this.context.arc(x, y, radius , this.startAngle, this.progressAngle * Math.PI / 180)
    this.context.stroke()
    if(this.progressAngle <= 0){
      clearInterval(this.intervalId)
      this.onFinish()
      Logger.error("FFFF","结束")
    }
  }

  aboutToAppear(){
    this.onceTime = this.duration / 360
  }

  build(){
    Stack(){
      Canvas(this.context)
        .width("100%")
        .height('100%')
        .onReady(() =>{
          this.updateAnim()
          this.intervalId = setInterval(this.updateAnim,this.onceTime)
        })
    }.width("100%").height("100%")
  }
}