【M-K1HSE开发板免费体验】相关源码分析与实现2-全部案例运行一般思路

最终没什么多说的了，还是贴上比较专业的一个开源链接，如果大家有时间可以自己操作一下：https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment
这里面大部分的代码都是可以直接运行的，但是要

• 使用模拟器或真机 : 要测试和查看这个自定义时钟的真实效果，你必须将应用运行 (Run) 在模拟器 (Emulator) 或真机 (Device) 上。只有在完整的鸿蒙操作系统环境中，所有必需的原生服务和API才能被正确调用，你的时钟才能被成功加载资源、绘制并动起来。

  

  一、 代码功能解读

这个项目的目标是实现一个自定义的、高性能的模拟时钟。它不使用 ArkUI 框架提供的 Image 或 Text 等常规组件来显示表针，而是使用了一个更底层的绘图接口 Canvas，来手动绘制整个时钟。

1. 核心技术栈

• Canvas 组件: 这是 ArkUI 提供的一个画布组件。它提供了一个 CanvasRenderingContext2D 对象，这个对象拥有一套类似于 HTML5 Canvas 的 API，允许开发者通过编码的方式（如 drawImage, rotate, clearRect）进行精细的 2D 图形绘制。
• image.createImageSource/createPixelMap: 这是鸿蒙的多媒体 image 接口，用于从应用的资源文件（如 resources/rawfile 目录下的图片）中加载图片数据，并将其解码成一个像素图 (PixelMap) **对象。**PixelMap 是一个可以直接在内存中操作的位图对象，可以被 Canvas 用来绘制。
• 定时器 (Timer): 代码中虽然没有直接展示 setInterval，但 TimeChangeListener 的实现原理必然是基于一个每秒触发一次的定时器，来驱动时钟的刷新。

2. 实现思路分解

• 初始化 (init 函数):

  • 加载资源: 从应用的资源目录加载表盘、时针、分针、秒针的图片资源。
  • 异步解码: createPixelMap() 是一个异步操作，因为它需要时间去解码图片。代码使用了 .then() (Promise 异步回调) 来处理解码完成后的逻辑。
  • 首次绘制: 一旦图片解码成 PixelMap，就立即调用 paintDial() (画表盘) 和 paintPin() (画表针) 函数，在 Canvas 上完成第一次的绘制。这确保了用户一进入页面就能看到时钟，而不是一个空白的画布。

• 动画循环 (通过 TimeChangeListener):

  • 启动监听: 创建一个 TimeChangeListener 实例，它内部会启动一个每秒执行一次的定时器。

  • 每秒回调: 定时器每触发一次，就会调用传入的回调函数。

  • 刷新画布: 在回调函数中：

    • clearRect(): 清空整个画布，擦掉上一秒的画面。
    • paintDial(): 重新绘制静态的表盘背景。
    • timeChanged(): 根据当前最新时间计算出时针、分针、秒针的新角度，并调用 paintPin() 分别绘制它们。
    • 这个“清空->重绘”的过程每秒重复一次，就形成了表针在动的视觉效果。

• 表针绘制 (paintPin 函数):

  • save(): 保存当前画布的“状态”（包括坐标系的原点、旋转角度等）。这是一个非常重要的步骤，相当于创建一个存档。
  • rotate(): 根据传入的角度 degree 旋转整个画布坐标系。
  • drawImage(): 在旋转后的坐标系上绘制表针图片。因为坐标系旋转了，所以图片看起来也就被旋转了。
  • restore(): 恢复到 save() 时保存的那个状态。这会撤销刚刚的旋转操作，让下一次绘制（比如绘制分针）能在一个未经旋转的“干净”坐标系上开始。这是实现多个独立旋转对象的关键。

  相关的代码来自这个项目：
  https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/analogclock

好吧，为了完成任务，我还是尽力完成了3篇，虽然没多少自己的内容，不过这个也是一个不断积累不断进步的过程？