场景介绍

自定义仪表盘是汽车类应用的典型场景之一。

本示例基于 Canvas 实现仪表盘样式自定义。

效果预览

实现思路

通过 beginPath 创建一个新的绘制路径，通过 arc 在 Canvas 上绘制圆弧路径，再通过 stroke 根据路径进行边框绘制，从而实现仪表盘效果。

1. drawCircleMiddle(centerx: number, centery: number) {
2. let grad = this.context.createConicGradient(this.degToRad(70), centerx, centery)
3. grad.addColorStop(0.0, '#FE9AE3')
4. grad.addColorStop(0.25, '#A19FFF')
5. grad.addColorStop(0.5, '#58B0F5')
6. grad.addColorStop(0.9, '#ce6e6dd7')
7. this.radius = this.canvasSize * 0.293
8. this.context.lineWidth = 18
9. this.context.strokeStyle = grad
10. this.context.beginPath()
11. if (this.speed <= this.maxSpeed) {
12. this.context.arc(centerx, centery, this.radius, this.degToRad(this.startAngle),
13. this.degToRad(this.startAngle + this.speed * 310 / this.maxSpeed + 0.1))
14. } else {
15. this.context.arc(centerx, centery, this.radius, this.degToRad(this.startAngle),
16. this.degToRad(this.startAngle + this.maxSpeed * 310 / this.maxSpeed + 0.1))
17. }
18. this.context.stroke()
19. }

约束与限制

• 本示例支持 API Version 17 Release 及以上版本。
• 本示例支持 HarmonyOS 5.0.5 Release SDK 及以上版本。
• 本示例需要使用 DevEco Studio 5.0.5 Release 及以上版本进行编译运行。

工程目录

1. ├──entry/src/main/ets
2. │ ├──entryability
3. │ │ └──EntryAbility.ets
4. │ ├──entrybackupability
5. │ │ └──EntryBackupAbility.ets
6. │ ├──model
7. │ │ └──GridInfo.ets // 网格内容
8. │ ├──pages
9. │ │ └──MainPage.ets // 主页
10. │ └──utils
11. │ └──Dashboard.ets // 仪表盘组件
12. └──entry/src/main/resources // 应用资源目录

参考文档

Canvas

CanvasRenderingContext2D

代码下载

自定义仪表盘示例代码

欢迎加入我的 HarmonyOS 班级，一起学习技术、分享成果，还有机会把精美的 HarmonyOS 礼盒带回家！快来报名，我们一起在 HarmonyOS 的世界里探索成长～

报名链接：

华为开发者学堂