Keep运动截图拼图工具 —— 运动数据可视化的专业生成平台
## 一、工具定位与核心价值
**Keep运动截图拼图工具**（访问路径：`sport-mosaic.html`）是一款专为运动数据记录者、内容创作者及跑步打卡用户设计的可视化编辑平台。它并非简单的图片拼接工具，而是一套**运动数据呈现的标准化解决方案**——用户可通过拖拽式操作，将距离、配速、心率、步频、步幅、卡路里等核心运动参数以数字素材的形式，精准拼合至Keep风格的运动详情底图上，生成高度仿真的运动记录截图。
该工具的核心价值在于：**将抽象的运动数据转化为符合平台视觉规范的结构化信息卡片**。无论是为个人运动记录留档，还是为运动数据分析报告提供可视化素材，`sport-mosaic.html` 均能以专业、高效的方式完成运动数据的“最后一公里”呈现。
## 二、核心功能模块与操作逻辑
### 1. 多项目底图支持 工具内置滑冰、冥想、爬楼梯、攀岩、跑步、室内跑步、行走、游泳、瑜伽、羽毛球等13种运动项目的专属底图与样图对照。用户通过顶部下拉菜单切换项目，画布自动加载对应底图，右侧同步显示样图参考，实现“所见即所得”的精准对齐。
### 2. 数字素材拼图系统 素材库分为**b系列**（单位标识，如公里、千卡、米、冒号等）与**数字/汉字系列**（0-9数字及层、个、配速、瓦等运动单位）。用户点击任一素材即可添加至画布中央，通过鼠标拖拽或键盘方向键（←↑↓→）进行像素级微调，Shift+方向键实现10倍速移动，Delete键删除选中素材，Esc取消选中。
### 3. 自定义信息独立编辑 - **头像**：支持上传本地图片，自动裁剪为圆形并添加绿色边框； - **用户名**：可编辑文本内容，字体大小与样式自动适配Keep风格； - **日期与时间**：年/月/日独立输入框，搭配起止时间选择器，自动拼接为“YYYY/MM/DD HH:MM - HH:MM”格式。
以上三个元素各自独立，可在画布上分别拖拽移动，满足不同截图布局需求。
### 4. 跑步轨迹图叠加（跑步项目专属） 当选择“跑步”项目时，画布右上角自动显示轨迹图上传入口。用户可上传自定义跑步轨迹图（JPG/PNG），并对其执行： - **拖拽移动**：点击轨迹图任意位置拖拽调整位置； - **滚轮缩放**：鼠标悬停时滚动滚轮等比缩放； - **手柄拖拽缩放**：选中后右下角显示绿色手柄，拖拽等比缩放； - **键盘控制**：选中轨迹图后，方向键移动，+/-键快速缩放，[/]键微调缩放。
## 三、数据呈现的专业性保障
本工具的设计严格遵循Keep运动记录的数据布局规范： - **头像**位于卡片左上角，尺寸与位置与官方保持一致； - **用户名**紧随头像右侧，字体大小与行高精确匹配； - **日期时间**位于头像下方，以浅灰色呈现； - **运动数据**通过数字素材拼贴于底图对应区域，每个数字与单位均来自独立素材，支持任意位置调整。
## 四、输出与扩展能力
工具支持**一键导出JPG图片**，导出时自动合成底图、轨迹图、所有拼图素材、头像、用户名及日期时间，生成可直接用于运动打卡或数据分析报告的完整截图。导出图片分辨率与画布尺寸一致，确保清晰度。
## 五、适用场景
| 场景 | 说明 | |------|------| | 校园跑打卡 | 快速生成符合Keep规范的跑步记录截图 | | 运动数据分析 | 为分析报告提供可视化运动数据卡片 | | 内容创作 | 为运动类自媒体提供标准化截图素材 | | 数据测试 | 为运动算法测试提供多维度数据样本 |
## 六、技术特点
- **纯前端实现**：无需服务器，所有操作在浏览器本地完成； - **素材复用**：同一素材可多次点击添加，满足复杂数据拼贴需求； - **撤销与重置**：支持撤销上一个添加的素材，一键重置清空所有内容； - **自适应缩放**：画布自动适配窗口大小，支持手动缩放与“适应窗口”一键复位； - **快捷操作**：完善的键盘快捷键体系，提升批量操作效率。
---
本工具将持续迭代，为运动数据记录与可视化提供更专业、更高效的解决方案。欢迎通过 `sport-mosaic.html` 访问体验。 今天状态一般，但坚持完成了计划里程，意志分拉满。