鸿蒙-canvas-画时钟

前言

你在 Android 上能画出来的东西，在鸿蒙上画不出来？
画个时钟嘛，有啥难的？
你行你上！
给钱就上！
给钱？早说嘛，来来来，现在就画
预备

画时钟需要画哪些元素？
圆圈、直线，没了，就这些，暂时看一下canvas 相关的 api，这不都有么？直接画。
看看需要用的方法

1. arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

复制代码

看下参数含义
参数类型必填默认值描述xnumber是0弧线圆心的x坐标值。ynumber是0弧线圆心的y坐标值。radiusnumber是0弧线的圆半径。startAnglenumber是0弧线的起始弧度。endAnglenumber是0弧线的终止弧度。counterclockwiseboolean否false是否逆时针绘制圆弧。 弧度制，一圈是 2π，这个需要留意一下，另有endAngle，是终止弧度，而不是需要画多少弧度，浅浅的尝试。

2. struct ClockViewTest {
3.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
4.   private canvasRendering: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
6.   build() {
7.     Canvas(this.canvasRendering).width("100%").height("100%")
8.       .onReady(() => {
10.         let width = this.canvasRendering.width
11.         let height = this.canvasRendering.height
13.         let centerX = width / 2
14.         let centerY = height / 2
15.         //取长宽中小的一个做直径
16.         let maxRadius = Math.min(width, height) / 2
18.         //设置线的粗细
19.         this.canvasRendering.lineWidth = 4
21.         this.canvasRendering.arc(centerX, centerY, maxRadius-50, 0, 1, false)
22.         //设置线的颜色
23.         this.canvasRendering.strokeStyle = "#ff0000"
24.         this.canvasRendering.stroke()
26.         this.canvasRendering.beginPath()
27.         this.canvasRendering.arc(centerX, centerY, maxRadius - 30, 0, 1, true)
28.         //设置线的颜色
29.         this.canvasRendering.strokeStyle = "#00ff00"
30.         this.canvasRendering.stroke()
32.       })
33.   }
34. }

复制代码

效果是如许的：

画直线就不用多说了，开干~~
分析

构成部分

指针是需要根据时间变化来转动的，表盘画好一次就不需要重绘了，偷个懒，搞两个 canvas 摞起来，底层画表盘，上层画指针，时间变了只重画上层指针就行了。
数值计算

简单的三角函数，但要留意是弧度制，数值别搞错了。
别的需要留意的是画布左上角坐标是(0,0)，右下角坐标为(width,height)。
过程

• 先画一大一小两个圆圈构成一个圆环。
  
• 再划线把圆环均分 60 份，每 5 条线加粗一下。
  
• 再把圆周分成 12 份，对应位置画上1~12 数字。
  
• 获取当前时间，计算出指针位置，划线。
  
• 定时更新指针位置。
  
• 竣事。
  

开始

第一步 画圆环

1. Canvas(this.canvasRendering).width("100%").height("100%")
2.   .onReady(() => {
4.     let width = this.canvasRendering.width
5.     let height = this.canvasRendering.height
7.     let centerX = width / 2
8.     let centerY = height / 2
9.     //取长宽中小的一个做直径
10.     let maxRadius = Math.min(centerX, centerY)
12.     //留一些外边距
13.     let outerCircleRadius = maxRadius - 20
14.     this.canvasRendering.strokeStyle = "#1b91e0"
15.     this.canvasRendering.lineWidth = 2
16.     //最中间的小圈圈
17.     this.canvasRendering.arc(centerX, centerY, 10, 0, Math.PI * 2, false)
18.     this.canvasRendering.stroke()
20.     //画内圈
21.     this.canvasRendering.beginPath()
22.     let innerCircleRadius = outerCircleRadius -20
23.     this.canvasRendering.arc(centerX, centerY, innerCircleRadius, 0, Math.PI * 2, false)
24.     this.canvasRendering.stroke()
26.     //画外圈
27.     this.canvasRendering.beginPath()
28.     this.canvasRendering.arc(centerX, centerY, outerCircleRadius, 0, Math.PI * 2, false);
29.     this.canvasRendering.stroke()
30.    
31.   })

复制代码

效果图

看着还行，颜色和粗细大家自己调。
第二步 画格子

1. //画 60 个格子，5 的倍数则线条粗一些
2. let perMinuteDegree = Math.PI * 2 / 60
3. for (let i = 1;i <= 60; i++) {
4.   //结束坐标，也就是在外圆上的点
5.   let endX = centerX + Math.sin(i * perMinuteDegree) * outerCircleRadius
6.   let endY = centerY + Math.cos(i * perMinuteDegree + Math.PI) * outerCircleRadius
7.   //起始坐标，也就是在内圆上的点
8.   let startX = centerX + Math.sin(i * perMinuteDegree) * innerCircleRadius
9.   let startY = centerY + Math.cos(i * perMinuteDegree + Math.PI) * innerCircleRadius
11.   this.canvasRendering.strokeStyle = "#000000"
12.   let path2D = new Path2D()
13.   path2D.moveTo(startX, startY)
14.   path2D.lineTo(endX, endY)
15.   if (i % 5 == 0) {
16.     this.canvasRendering.lineWidth = 6
17.   } else {
18.     this.canvasRendering.lineWidth = 2
19.   }
20.   this.canvasRendering.stroke(path2D)
21. }

复制代码

效果图

敷衍了事，不太好看。
这里需要留意一下，画布是以垂直向下为 Y 轴的正方向，计算时加了 Math.PI 弧度改正一下
第三步 画数字

1. //画 1~12 数字圆形分布
2. this.canvasRendering.font = "40px"
3. let perNumberDegree = Math.PI * 2 / 12
4. let numberRadius = outerCircleRadius - 40
6. for (let i = 1;i <= 12; i++) {
7.   let x = centerX + Math.sin(i * perNumberDegree) * numberRadius
8.   let y = centerY + Math.cos(i * perNumberDegree + Math.PI) * numberRadius
9.   let text: string = i + ""
11.   this.canvasRendering.fillStyle = "#000000"
12.   let textMetrics: TextMetrics = this.canvasRendering.measureText(text)
13.   //填充文字时，传入的坐标是文字的左下角坐标
14.   this.canvasRendering.fillText(text, x-textMetrics.width/2 , y+textMetrics.height/2)
15.   //把下面这两行注释掉就没有小方块了
16.   this.canvasRendering.fillStyle = "#aaff6134"
17.   this.canvasRendering.fillRect(x,y,textMetrics.width,textMetrics.height)
19. }

复制代码

效果图

图上的方块是为了对比画笔墨和画方块的坐标区别展示出来的：添补笔墨时传入的坐标是笔墨左下角的坐标，而画方块时是传入的方块左上角坐标,这里留意一下就好了，代码中测量了一下笔墨宽高，粗暴的做了一下纠偏。
第四、五步 画指针&定时更新

上面也说要把指针画在别的一个 canvas 上，减少一下绘制时的内容，没做对比，也不知道有没有作用。
预备别的个画布，把两个画布用 Stack 包一下。

1. Canvas(this.canvasRenderingClock).width("100%").height("100%").onReady(() => {
2.   this.timer = setInterval(function(){
3.     let date: Date = new Date()
4.     this.minute = date.getMinutes()
5.     this.hour = date.getHours()
6.     this.second = date.getSeconds()
7.     this.draw()
8.   }.bind(this), 500)
9. })

复制代码

这里需要把第一块代码中的 innerCircleRadius 变量提到外部，作为类成员两个画布共用一下，主要是计算指针尽头坐标用的。centerX 和 centerY 无所谓，只要两个画布对齐了，用哪个都行，这里照旧提到了外部，用的第一块画布的。

1. private draw() {
2.   清空一下画布
3.   this.canvasRenderingClock.clearRect(0, 0, this.centerX * 2, this.centerY * 2)
5.   //画秒针
6.   //计算秒针的角度
7.   let secondDegree = Math.PI * 2 / 60 * this.second
8.   let secondStartX = this.centerX
9.   let secondStartY = this.centerY
10.   let secondEndX = this.centerX + Math.sin(secondDegree) * this.innerCircleRadius
11.   let secondEndY = this.centerY + Math.cos(secondDegree + Math.PI) * this.innerCircleRadius
12.   let secondPath = new Path2D()
13.   secondPath.moveTo(secondStartX, secondStartY)
14.   secondPath.lineTo(secondEndX, secondEndY)
15.   this.canvasRenderingClock.lineWidth = 2
16.   this.canvasRenderingClock.stroke(secondPath)
19.   //画分针 颜色弄点透明度，要不然重合的时候看不清楚
20.   //秒针走一圈，分针走一格，其实可以忽略不计
21.   let minuteDegree = Math.PI * 2 / 60 * this.minute
22.   let minuteStartX = this.centerX
23.   let minuteStartY = this.centerY
24.   let minuteEndX = this.centerX + Math.sin(minuteDegree) * (this.innerCircleRadius / 5 * 4)
25.   let minuteEndY = this.centerY + Math.cos(minuteDegree + Math.PI) * (this.innerCircleRadius / 5 * 4)
26.   let minutePath = new Path2D()
27.   minutePath.moveTo(minuteStartX, minuteStartY)
28.   minutePath.lineTo(minuteEndX, minuteEndY)
29.   this.canvasRenderingClock.strokeStyle = "#aa1b91e0"
30.   this.canvasRenderingClock.lineWidth = 4
31.   this.canvasRenderingClock.stroke(minutePath)
33.   //画时针
34.   //分针走一圈，时针走 5 小格
35.   let hourDegree = Math.PI * 2 / 12 * this.hour + this.minute / 60 * Math.PI * 2 / 12
36.   let hourStartX = this.centerX
37.   let hourStartY = this.centerY
38.   let hourEndX = this.centerX + Math.sin(hourDegree) * (this.innerCircleRadius / 4 * 3)
39.   let hourEndY = this.centerY + Math.cos(hourDegree + Math.PI) * (this.innerCircleRadius / 4 * 3)
40.   let hourPath = new Path2D()
41.   hourPath.moveTo(hourStartX, hourStartY)
42.   hourPath.lineTo(hourEndX, hourEndY)
43.   this.canvasRenderingClock.lineWidth = 6
44.   this.canvasRenderingClock.strokeStyle = "#aa39d167"
45.   this.canvasRenderingClock.stroke(hourPath)
46. }

复制代码

计算指针角度的时候也偷懒了，时针只思量了当前分钟数，没有思量秒数，现实差不多，先如许吧。
最后一步

效果图

就先如许吧，勉勉强强，可以自己调调颜色，调调样式，大概搞一些图片来代替这些元素也行。
源码在这里 https://github.com/huangyuanlove/HelloArkUI/blob/main/entry/src/main/ets/pages/playground/AlarmClockPage.ets ,
https://gitee.com/huangyuan/HelloArkUI/blob/main/entry/src/main/ets/pages/playground/AlarmClockPage.ets
仓库所在：https://github.com/huangyuanlove/HelloArkUI
https://gitee.com/huangyuan/HelloArkUI

---

以上

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。