如何通过定时器和画布实现一个时钟

通过定时器和画布实现一个时钟

HarmonyOS

鸡翅可乐

2024-05-26 17:20:51

浏览

回答 1

按赞同

按时间

克里斯蒂东

使用的核心API

使用该画布作为绘制表盘、时针、分针及秒针。

Canvas(this.renderContext) 
  .width(this.canvasSize) 
  .aspectRatio(1) 
  .onReady(() => { 
    if (this.drawInterval === -1) { 
 
      this.startDrawTask(); 
    } 
  })1.
2.
3.
4.
5.
6.
7.
8.
9.

通过定时器每秒钟执行一次绘制任务，使时钟动起来。

this.timeId = setInterval(()=>{ 
  this.startDrawTask(); 
},1000)1.
2.
3.

核心代码解释

@Entry 
@Component 
struct ClockCard { 
  /* 
   * The action type. 
   */ 
  readonly ACTION_TYPE: string = 'router'; 
  /* 
   * The ability name. 
   */ 
  readonly ABILITY_NAME: string = 'EntryAbility'; 
  /* 
   * The message. 
   */ 
  readonly MESSAGE: string = 'add detail'; 
  /* 
   * The width percentage setting. 
   */ 
  readonly FULL_WIDTH_PERCENT: string = '100%'; 
  /* 
   * The height percentage setting. 
   */ 
  readonly FULL_HEIGHT_PERCENT: string = '100%'; 
  private settings: RenderingContextSettings = new RenderingContextSettings(true); 
  private renderContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 
  private drawInterval: number = -1; 
  private canvasSize: number = 100; 
  private clockRadius: number = 0; 
  timeId: number = -1; 
 
  aboutToAppear() { 
    // 根据canvasSize初始化clockRadius 
    this.clockRadius = this.canvasSize / 2 - 2; 
  } 
 
  aboutToDisappear() { 
    // clearInterval(this.drawInterval); 
  } 
 
  onPageShow(): void { 
    //指针移动角度 
    this.timeId = setInterval(() => { 
      this.startDrawTask(); 
    }, 1000) 
  } 
 
  build() { 
    Column() { 
      Canvas(this.renderContext) 
        .width(this.canvasSize) 
        .aspectRatio(1) 
        .onReady(() => { 
          if (this.drawInterval === -1) { 
            this.renderContext.translate( 
              this.canvasSize / 2, // 126 
              this.canvasSize / 2); 
            console.log('画布画图'); 
          } 
        }) 
      Column({ space: 3 }) { 
        Text(DateUtil.getWeek()) 
          .letterSpacing(1) 
          .fontSize(10) 
          .fontWeight(FontWeight.Bolder) 
        Text(DateUtil.getYearAndMonthAndDay()) 
          .fontWeight(1) 
          .fontSize(10) 
          .letterSpacing(1) 
      } 
      .margin({ top: 5 }) 
    } 
    .margin({ top: 10 }) 
    .width("100%") 
    .height("100%") 
    .backgroundColor(Color.White) 
    .onClick(() => { 
      postCardAction(this, { 
        action: this.ACTION_TYPE, 
        abilityName: this.ABILITY_NAME, 
        params: { 
          message: this.MESSAGE 
        } 
      }); 
    }) 
  } 
 
  // 启动绘画任务 
  private startDrawTask() { 
    let that = this; 
    // translate() 方法，将 canvas 按原始 x 点的水平方向、原始的 y 点垂直方向进行平移变换 
    /*that.renderContext.translate( 
      this.canvasSize / 2, // 126 
      this.canvasSize / 2); // 126*/ 
    that.drawClockArea(); 
    // this.drawInterval = setInterval(() => { 
    //   that.drawClockArea(); 
    // }, 1000);// 1000毫秒，即一秒钟绘画一次 
  } 
 
  // 开始绘制时钟区域 
  private drawClockArea(): void { 
    // clearRect() 方法在一个矩形区域内设置所有像素都是透明的 (rgba(0,0,0,0))。这个矩形范围的左上角在 (x, y)，宽度和高度分别由width和height确定。 
    this.renderContext.clearRect( 
      -this.canvasSize, // -252 
      -this.canvasSize / 2, // -126 
      this.canvasSize * 2, // 504 
      this.canvasSize); // 252 
 
    // 设置时间 
    let date = new Date(); 
    let hour = date.getHours(); 
    let minute = date.getMinutes(); 
    let second = date.getSeconds(); 
    this.drawClock(hour, minute, second); 
  } 
 
  private drawClock(hour: number, minute: number, second: number): void { 
 
    // 绘制表盘 
    this.drawPan(); 
    // 绘制时针 
    this.drawPointer( 
      30 * (hour > 12 
        ? hour - 12 
        : hour) 
        + minute / 12 * 6 
      , '/common/images/ic_hour_pointer.png'); 
    // 绘制分针 
    this.drawPointer(6 * minute, '/common/images/ic_minute_pointer.png'); 
    // 绘制秒针 
    this.drawPointer(6 * second, '/common/images/ic_second_pointer.png'); 
  } 
 
  // 绘制表盘 
  private drawPan(): void { 
    this.renderContext.beginPath(); 
    let secondImg = new ImageBitmap('/common/images/ic_clock_pan.png'); 
    let imgWidth = this.clockRadius * 2; // 248 
    this.renderContext.drawImage(secondImg, -this.clockRadius, -this.clockRadius, imgWidth, imgWidth); 
    this.renderContext.restore(); 
  } 
 
  // 绘制时钟的针 
  private drawPointer(degree: number, pointerImgRes: string) { 
    this.renderContext.save(); 
    let theta = (degree + 180) * Math.PI / 180; 
    this.renderContext.rotate(theta); 
 
    this.renderContext.beginPath(); 
    let secondImg = new ImageBitmap(pointerImgRes); 
    let imgWidth = 4; 
    this.renderContext.drawImage( 
      secondImg, 
      -imgWidth / 2, 
      -this.clockRadius, 
      imgWidth, 
      this.clockRadius * 2); 
    this.renderContext.restore(); 
  } 
} 
 
export default class DateUtil { 
  private static date: Date = new Date(); 
 
  public static getMonth(): number { 
 
    return DateUtil.date.getMonth() + 1; 
  } 
 
  public static getYearAndMonthAndDay(): string { 
 
    return DateUtil.date.getFullYear() + "年" 
      + DateUtil.getMonth() + '月' 
      + DateUtil.date.getDate() + '日'; 
  } 
 
  public static getWeek() { 
 
    let week: string = ""; 
    let weekDay: number = DateUtil.date.getDay(); 
    switch (weekDay) { 
      case 0: 
        week = '星期天'; 
        break; 
      case 1: 
        week = '星期一'; 
        break; 
      case 2: 
        week = '星期二'; 
        break; 
      case 3: 
        week = '星期三'; 
        break; 
      case 4: 
        week = '星期四'; 
        break; 
      case 5: 
        week = '星期五'; 
        break; 
      case 6: 
        week = '星期六'; 
        break; 
      default: 
        "未识别"; 
    } 
 
    return week; 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.

实现效果

2024-05-27 22:01:58

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

如何通过定时器和画布实现一个时钟

订阅鸿蒙技术特刊，精选内容抢先看