HarmonyOS应用《玄象》开发实战:二十四山与方位汉字的极坐标定位算法
📅 2026/7/27 12:11:33
👁️ 阅读次数
📝 编程学习
阅读时长:约 18 分钟 | 难度:★★★★☆ | 篇章:第 7 篇 · 风水罗盘模块 对应源码:
entry/src/main/ets/pages/fengshui/LuopanPage.ets
前言
二十四山是风水罗盘的核心方位标识系统。玄象项目通过极坐标算法将 24 个方位汉字(子、癸、丑、艮、寅、甲等)精确绘制在罗盘圆周上。本篇将深入剖析玄象项目二十四山方位汉字定位算法的实现:从极坐标到直角坐标转换、fillText文字定位、textAlign文字对齐,到二十四山数据结构。掌握这套二十四山定位算法,您就能为任何 HarmonyOS 应用构建罗盘方位标识系统。
提示:二十四山每 15° 一个方位,覆盖 360° 圆周。
一、二十四山数据
1.1 数据结构
interface TwentyFourShan { name: string; // 方位名 degree: string; // 角度 wuxing: string; // 五行 }二、极坐标定位算法
2.1 文字定位
private drawTwentyFourShan(canvas: CanvasRenderingContext2D, cx: number, cy: number, r: number): void { for (let i = 0; i < 24; i++) { const angle = (i * 15 - 90) * Math.PI / 180; const textR = r * 0.78; const x = cx + textR * Math.cos(angle); const y = cy + textR * Math.sin(angle); canvas.fillStyle = Colors.PRIMARY_GOLD; canvas.font = '14px sans-serif'; canvas.textAlign = 'center'; canvas.fillText(this.twentyFourShan[i].name, x, y + 5); } }三、二十四山定位算法设计总结
3.1 参数说明
| 参数 | 值 | 说明 |
|---|---|---|
| 总数 | 24 | 二十四山 |
| 间隔 | 15° | 360° / 24 |
| 起始偏移 | -90° | 正上方为子 |
| 半径比例 | 0.78 | 刻度与中心之间的中间位置 |
总结
本篇以玄象项目二十四山方位汉字定位为蓝本,深入剖析了 Canvas 极坐标文字定位算法:从极坐标到直角坐标转换、fillText文字定位、textAlign文字对齐,到二十四山数据结构。掌握这套二十四山定位算法,您就能为任何 HarmonyOS 应用构建罗盘方位标识系统。
如果这篇文章对你有帮助,欢迎点赞👍、收藏⭐、关注🔔,你的支持是我持续创作的动力!
相关资源:
- 二十四山:wikipedia.org/wiki/二十四山
- 开源鸿蒙跨平台社区:https://openharmonycrossplatform.csdn.net
编程学习
技术分享
实战经验