#鸿蒙通关秘籍#如何使用Canvas和定时器实现HarmonyOS模拟时钟?

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
hm673ff0383fd94

使用Canvas和定时器在HarmonyOS中实现模拟时钟需要以下几个步骤:

  1. 初始化表盘和指针图像资源

    在页面即将显示时,调用init()函数初始化表盘和指针图像,并计算当前时间,以便立即展示出准确的模拟时钟。

    private init() {
      let clockBgSource = image.createImageSource(this.resourceDir + '/' + CLOCK_BG_PATH);
      let hourSource = image.createImageSource(this.resourceDir + '/' + CLOCK_HOUR_PATH);
      let minuteSource = image.createImageSource(this.resourceDir + '/' + CLOCK_MINUTE_PATH);
      let secondSource = image.createImageSource(this.resourceDir + '/' + CLOCK_SECOND_PATH);
    
      const now = new Date();
      const currentHour = now.getHours();
      const currentMinute = now.getMinutes();
      const currentSecond = now.getSeconds();
      this.time = this.getTime(currentHour, currentMinute, currentSecond);
    
      // 创建和绘制表盘像素图
      clockBgSource.createPixelMap().then((pixelMap: image.PixelMap) => {
        this.clockPixelMap = pixelMap;
        this.paintDial();
      }).catch((err: BusinessError) => {
        console.error(`[error]error at clockBgSource.createPixelMap:${err.message}`);
      });
    
      // 创建和绘制时针像素图
      hourSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {
        await paintDial;
        const hourOffset = currentMinute / 2;
        this.paintPin(ANGLE_PRE_HOUR * currentHour + hourOffset, pixelMap);
        this.hourPixelMap = pixelMap;
      }).catch((err: BusinessError) => {
        console.error(`[error]error at hourSource.createPixelMap:${err.message}`);
      });
      ...
    }
    
  2. 监听时间变化

    设置定时器,每秒钟更新一次表盘和指针实现模拟时钟的运转。

    this.timeListener = new TimeChangeListener(
      (hour: number, minute: number, second: number) => {
        this.renderContext.clearRect(-this.clockRadius, -this.clockRadius, this.canvasSize, this.canvasSize);
        this.paintDial();
        this.timeChanged(hour, minute, second);
        this.time = this.getTime(hour, minute, second);
      },
    );
    
  3. 绘制表盘和指针

    在绘制指针时,需注意Canvas画布旋转可能引起的状态混乱,确保在每次旋转绘制时保存并恢复画布状态。

    private paintPin(degree: number, pinImgRes: image.PixelMap | null) {
      this.renderContext.save();
      const angleToRadian = Math.PI / 180;
      let theta = degree * angleToRadian;
      this.renderContext.rotate(theta);
      this.renderContext.beginPath();
      if (pinImgRes) {
        this.renderContext.drawImage(
          pinImgRes,
          -IMAGE_WIDTH / 2,
          -this.clockRadius,
          IMAGE_WIDTH,
          this.canvasSize);
      } else {
        console.error('PixelMap is null!');
      }
      this.renderContext.restore();
    }
    

通过以上步骤,即可在HarmonyOS应用中实现实时更新的模拟时钟。


分享
微博
QQ
微信
回复
1天前
相关问题
如何通过定时器画布实现一个时钟
761浏览 • 1回复 待解决
HarmonyOS 定时器API
150浏览 • 1回复 待解决
如何设置组件定时任务定时器
449浏览 • 1回复 待解决
HarmonyOS uv timer定时器不准确?
264浏览 • 1回复 待解决
鸿蒙liteos_m定时器timer问题
7968浏览 • 2回复 待解决
有谁知道ArkTS支持定时器
2657浏览 • 1回复 待解决