HarmonyOS应用《玄象》开发实战：LuopanPage 罗盘页：@ohos.public.sensor 陀螺仪/方向传感器接入
阅读时长：约 19 分钟 | 难度：★★★★★ | 篇章：第 7 篇 · 风水罗盘模块 对应源码：
entry/src/main/ets/pages/fengshui/LuopanPage.ets
前言
风水罗盘是玄象项目最具互动性的功能之一。通过@ohos.public.sensor方向传感器，罗盘指针随设备旋转实时指向真实方位。本篇将深入剖析玄象项目罗盘页的实现：从@ohos.public.sensor传感器 API、onDirection方向监听、@State compassAngle角度状态绑定，到罗盘 Canvas 指针旋转动画。掌握这套传感器接入方法论，您就能为任何 HarmonyOS 应用接入硬件传感器。
提示：方向传感器提供的方位角以正北为 0°，顺时针旋转。
一、传感器接入
1.1 方向传感器监听
import { sensor } from '@ohos.public.sensor'; private startCompass(): void { sensor.on(sensor.SensorType.DIRECTION, (data: sensor.DirectionResponse) => { this.compassAngle = data.direction; // 0-360 度 this.currentDirection = this.getDirectionName(data.direction); }); }二、Canvas 罗盘绘制
2.1 罗盘结构
Canvas(this.luopanContext) .width(320).height(320) .onReady(() => { this.drawLuopan(this.luopanContext, this.luopanContext.width, this.luopanContext.height); })三、罗盘指针
3.1 指针 UI
Column() { Text('▲').fontSize(16).fontColor('#F44336') // 红色指北针 Column().width(2).height(60).backgroundColor('#F44336') Column().width(2).height(60).backgroundColor('#FFFFFF') Text('▼').fontSize(16).fontColor('#FFFFFF') // 白色指南针 } .width(20).height(140)四、罗盘页设计总结
4.1 页面结构
| 区域 | 组件 | 内容 |
|---|---|---|
| 罗盘圆盘 | Canvas | 360° 刻度 + 二十四山 |
| 指针 | Column | 红白指针 |
| 方位显示 | Row | 方位/角度/二十四山 |
| 实时数据 | Column | 传感器数据展示 |
总结
本篇以玄象项目罗盘页为蓝本，深入剖析了 ArkUI 传感器接入实现：从@ohos.public.sensor方向传感器 API、onDirection方向监听、@State compassAngle角度状态绑定，到罗盘 Canvas 指针旋转动画。掌握这套传感器接入方法论，您就能为任何 HarmonyOS 应用接入硬件传感器。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
相关资源：
- HarmonyOS 官方文档：sensor 传感器
- 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net