数据图定位对比工具

纯前端工具，用于将多张坐标图截图导入浏览器，通过人工标定坐标轴，将图片映射到统一数据坐标系，进行非等比例缩放、叠加和对比。

所有图像仅在浏览器本地处理，不上传服务器。

功能

• 图片导入 — Ctrl+V 粘贴、拖放、文件选择器，支持 PNG/JPEG/WebP
• 图层管理 — 多图层叠加，透明度调节，显示/隐藏，顺序调整
• ROI 框选 — 框选绘图区，排除标题和图例干扰
• 坐标标定 — 四点标定横纵轴，标定点可拖动微调，实时显示刻度值
• 统一坐标空间 — 交集/并集/手动三种范围模式，非等比例缩放对齐
• 对比分析 — 图层染色，十字光标同步显示数据坐标
• 撤销/重做 — Ctrl+Z / Ctrl+Shift+Z
• 工程管理 — IndexedDB 自动保存，工程 JSON 导入/导出
• PNG 导出 — 支持 1×/2×/4× 分辨率导出叠加结果

快速开始

npm install
npm run dev      # 启动开发服务器 (http://localhost:5173)
npm test         # 运行测试
npm run build    # 构建生产版本

技术栈

React 19 / TypeScript / Vite / react-konva / Vitest / IndexedDB

操作流程

1. 导入图片 → 新建工程保存
2. 选择 ROI 工具框选绘图区域
3. 横轴标定：点击两点并输入刻度值
4. 纵轴标定：点击两点并输入刻度值
5. 切换到"交集"或"并集"模式查看对齐效果
6. 调整透明度/染色进行对比
7. 导出 PNG 或导出工程文件

项目结构

src/
├── models/      # 数据模型
├── core/        # 核心算法（坐标变换、范围计算）
├── canvas/      # Konva 画布组件
├── components/  # UI 组件
├── hooks/       # 业务逻辑 Hook
├── storage/     # IndexedDB 持久化
└── workers/     # Web Worker 导出

许可证

MIT