近视度数模拟器

基于 Electron 运行时的鸿蒙桌面应用，一款专业的近视度数与实际效果模拟工具。

欢迎加入开源鸿蒙PC社区： https://harmonypc.csdn.net

重要提示：本应用需要 HarmonyOS API 23 及以上版本运行。

项目简介

近视度数模拟器帮助用户了解不同近视度数下的视觉效果，通过Canvas技术模拟视力模糊程度，让用户直观感受近视对视觉的影响，从而增强护眼意识。

┌─────────────────────────────────────────────────────┐
│                    前端应用层                      │
│      (HTML/CSS/JavaScript + Canvas渲染)          │
├─────────────────────────────────────────────────────┤
│              Electron + Preload 层                 │
│              (IPC 通信、API 暴露)                 │
├─────────────────────────────────────────────────────┤
│               HarmonyOS 原生层                      │
│         (libadapter.so + ETS Adapters)            │
└─────────────────────────────────────────────────────┘

功能特性

👓 度数选择

• 滑块调节-1.00D到-10.00D范围
• 实时数值显示
• 近视程度自动分类（轻度/中度/高度）

🎯 模拟预览

• Canvas绘制E字视力表
• 实时模糊效果渲染
• 正常视力vs近视对比

📊 视力对照表

• 21个关键度数点数据
• 裸眼视力换算
• 模糊程度描述
• 颜色分类标识

📚 护眼知识

• 用眼时间建议
• 用眼距离指导
• 光线环境要求
• 户外活动建议
• 营养补充指南
• 充足睡眠提醒

项目结构

electron-openharmony-vue3/
├── ohos_hap/
│   ├── electron/
│   ├── web_engine/
│   │   └── src/main/resources/resfile/resources/app/
│   │       ├── vision_simulator.html     # 主页面
│   │       ├── vision_simulator_style.css # 样式文件
│   │       ├── main.js                  # Electron入口
│   │       └── js/
│   │           ├── vision_simulator_data.js  # 数据文件
│   │           └── vision_simulator_core.js   # 核心逻辑
│   ├── AppScope/
│   └── BUILD_OUTPUT.md
├── docs/
│   └── 近视度数模拟器技术实现详解.md
└── README.md

快速开始

环境要求

• Node.js 18+
• DevEco Studio 5.0+
• HarmonyOS SDK (API 23+) ⚠️
• Windows 10/11 或 macOS 10.14+

运行项目

在 DevEco Studio 中打开项目，直接运行即可。

构建 HAP

cd ohos_hap
hvigorw assembleHap

构建产物输出到 ohos_hap/build/outputs/hap/ 目录。

技术架构

核心模块

模块	文件	说明
视图层	vision_simulator.html	页面结构和组件布局
样式层	vision_simulator_style.css	蓝色主题样式
数据层	js/vision_simulator_data.js	度数数据和配置
逻辑层	js/vision_simulator_core.js	Canvas渲染和交互

技术亮点

• Canvas视力表绘制：E字图随机方向渲染
• CSS模糊效果模拟：filter blur实现视力模拟
• 实时交互：滑块调节即时反馈
• 度数-视力换算：精确的视力值计算
• 响应式设计：适配多种屏幕尺寸

技术栈

类别	技术	说明
框架	HTML5	语义化页面结构
样式	CSS3	主题样式和动画
图形	Canvas 2D	E字视力表绘制
模糊	CSS filter	blur效果模拟
脚本	JavaScript ES6+	交互控制和计算
运行时	Electron	鸿蒙定制版

使用示例

模拟近视效果

1. 拖动滑块选择近视度数
2. 观察右侧模糊视图中E字的变化
3. 对比正常视力和近视视图的差异

查看视力对照

1. 滚动到视力对照表区域
2. 查看不同度数对应的裸眼视力
3. 了解模糊程度描述

相关文档

• BUILD_OUTPUT.md - 构建输出说明
• docs/近视度数模拟器技术实现详解.md - 详细技术文档

License

MIT

更新日志

v1.0.0 (2026)

• 初始版本发布
• 度数选择功能
• Canvas视力表模拟
• 模糊效果渲染
• 视力对照表
• 护眼知识科普
• Electron + OpenHarmony 融合框架
• 需要 HarmonyOS API 23+
• 响应式设计支持