鸿蒙应用开发小例-制作时钟表盘

实现效果

结构拆解

整个表盘结构分为：时间刻度、时针、分针、秒针、中心红点。显示层级亦是如此。

其中时间刻度和中心红点是固定不动的内容，时针、分针、秒针需要根据时间做旋转变化，以显示正确的时间。

代码实现

constants下定义了一些通用的数值和颜色，请自行替换。

以下各个时钟的组成部分放入Stack组件中。

刻度

这里使用6组对称的长方形表示刻度，其中0、3两组代表时钟表盘0点、3点、6点、9点刻度，尺寸为tickMarkSize，其他刻度尺寸为tickMarkSize的一半。

const tickMarkSize: number = 20

Stack() {
    ForEach([0, 1, 2, 3