R524809
184 lines
5.7 KiB
Markdown
184 lines
5.7 KiB
Markdown
# 认识钟表 — 预览、出题与绘制设计
|
||
|
||
> 配套文档：[产品设计文档](../产品设计文档.md) | [技术架构设计文档](../技术架构设计文档.md)
|
||
> 版本：v1.0
|
||
> 最后更新：2026-06-25
|
||
|
||
---
|
||
|
||
## 一、目标与范围
|
||
|
||
为幼儿园中班至小学一年级（约 4–7 岁）提供 **「看模拟钟表，填写数字时间」** 的可打印练习纸。
|
||
|
||
- 每页 **4 行 × 3 列**，共 12 题
|
||
- 每组：上方模拟钟表 + 下方带冒号的数字填写框
|
||
- 小程序内预览、换题、下载打印
|
||
- 排版归类为技术架构文档 **模式 H：时钟/特殊图形型**
|
||
|
||
**实现路径**：独立绘制页 `mathPages/clockReading/`，不并入 `mathDraw` 聚合页（时钟绘制逻辑特殊，独立维护更清晰）。
|
||
|
||
---
|
||
|
||
## 二、页面结构
|
||
|
||
```
|
||
mathPages/clockReading/
|
||
├── clockReading.ts
|
||
├── clockReading.wxml
|
||
├── clockReading.less
|
||
├── clockReading.json
|
||
├── clockReading.config.ts
|
||
├── generators/
|
||
│ └── clock-generator.ts # 纯数据出题
|
||
└── draw/
|
||
├── clockReadingDraw.ts # 整页编排
|
||
└── drawAnalogClock.ts # 模拟钟表（可复用）
|
||
```
|
||
|
||
**交互区（预览卡片下方）**
|
||
|
||
| 区域 | 说明 |
|
||
|------|------|
|
||
| 预览卡片 | Canvas 实时预览 A4 效果，支持换一换 |
|
||
| 时刻类型 chips | 随机（默认）/ 整点 / 半点 / 刻钟 |
|
||
| 底部操作 | 分享、下载打印（复用 `pageMixin`） |
|
||
|
||
---
|
||
|
||
## 三、练习纸版面
|
||
|
||
### 3.1 网格布局
|
||
|
||
```
|
||
┌──────────────────────────────────────────┐
|
||
│ [统一页眉] 认识钟表 │
|
||
│ 姓名:___ 日期:___ 得分:___ │
|
||
├──────────────────────────────────────────┤
|
||
│ [钟1] [钟2] [钟3] │
|
||
│ [__:__] [__:__] [__:__] │
|
||
│ [钟4] [钟5] [钟6] │
|
||
│ ... │
|
||
│ （4 行 × 3 列 = 12 题） │
|
||
└──────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.2 单题单元
|
||
|
||
1. **模拟钟表**：绿色外圈、1–12 数字、红色时针、黑色分针
|
||
2. **填写框**：绿色圆角描边，中间固定冒号 `:`，左右留白供手写
|
||
|
||
### 3.3 A4 尺寸参数（逻辑像素 595×842）
|
||
|
||
| 参数 | 值 |
|
||
|------|-----|
|
||
| 内容区起始 Y | 页眉后 ~110px |
|
||
| 左右边距 | 28px |
|
||
| 行数 / 列数 | 4 / 3 |
|
||
| 钟表半径 | ~58px |
|
||
| 钟表与填写框间距 | 10px |
|
||
| 填写框 | 宽 88px，高 30px，圆角 6px |
|
||
| 行高 | ~168px |
|
||
|
||
---
|
||
|
||
## 四、钟表视觉规范
|
||
|
||
| 元素 | 颜色 | 色值 |
|
||
|------|------|------|
|
||
| 外圈 | 绿色 | `#3D9E47` |
|
||
| 刻度 / 数字 | 黑色 | `#333333` |
|
||
| 时针 | 红色 | `#E53935` |
|
||
| 分针 / 中心点 | 黑色 | `#333333` |
|
||
| 填写框描边 | 绿色 | `#3D9E47` |
|
||
| 冒号 | 黑色 | `#333333` |
|
||
|
||
**指针角度**（12 点方向为 0°，顺时针）：
|
||
|
||
```ts
|
||
const minuteAngle = minute * 6;
|
||
const hourAngle = (hour % 12) * 30 + minute * 0.5;
|
||
// Canvas 绘制时减去 90° 偏移（0° 在 3 点方向）
|
||
```
|
||
|
||
---
|
||
|
||
## 五、时刻类型
|
||
|
||
| 模式 ID | 显示名称 | 分针位置 | 示例 | 难度 |
|
||
|---------|----------|----------|------|------|
|
||
| `random` | 随机 | 0–59 分均可 | 如 4:07、11:23 | ★★ |
|
||
| `whole-hour` | 整点 | 12 点（0 分） | 3:00, 9:00 | ★ |
|
||
| `half-hour` | 半点 | 6 点（30 分） | 6:30, 10:30 | ★★ |
|
||
| `quarter-hour` | 刻钟 | 3 或 9 点（15/45 分） | 2:15, 7:45 | ★★★ |
|
||
|
||
> **命名说明**：「刻钟」对应传统「一刻」「三刻」，比「一刻时」更符合小学钟表教学用语，且与「整点」「半点」形成清晰三元组。
|
||
|
||
**随机模式**：分钟在 0–59 之间均匀随机，不限制为整点/半点/刻钟。
|
||
|
||
---
|
||
|
||
## 六、出题规则（`clock-generator.ts`）
|
||
|
||
```ts
|
||
interface ClockProblem {
|
||
hour: number; // 1–12
|
||
minute: number; // 随机模式 0–59；其他模式见时刻类型表
|
||
}
|
||
|
||
interface ClockReadingData {
|
||
problems: ClockProblem[]; // 固定 12 个
|
||
timeMode: ClockReadingTimeMode;
|
||
}
|
||
```
|
||
|
||
1. 每页固定 12 题
|
||
2. 同一页内 `(hour, minute)` 不重复
|
||
3. 小时 1–12 均匀随机
|
||
4. 按所选时刻类型约束 `minute`
|
||
5. 纯函数输出 JSON，不依赖 Canvas
|
||
|
||
---
|
||
|
||
## 七、绘制服务拆分
|
||
|
||
```
|
||
clockReadingDraw.draw(data)
|
||
├── prepareDraw() / drawHeaderAndDivider({ title: '认识钟表' })
|
||
└── drawGrid(problems)
|
||
└── for each:
|
||
├── drawAnalogClock(cx, cy, radius, hour, minute)
|
||
└── drawTimeInputBox(x, y, w, h)
|
||
```
|
||
|
||
`drawAnalogClock.ts` 独立封装，便于后续「画指针」题型复用。
|
||
|
||
---
|
||
|
||
## 八、配置与注册
|
||
|
||
- Worksheet ID：`clock-reading`
|
||
- 分类：`math` / `clock-reading`
|
||
- 路径：`/mathPages/clockReading/clockReading?id=clock-reading`
|
||
- 注册：`app.json` 分包、`config/worksheets/clockReading.ts`、`category.data.ts`
|
||
|
||
---
|
||
|
||
## 九、验收标准
|
||
|
||
- [ ] 预览区 4×3 共 12 组「钟表 + 填写框」
|
||
- [ ] 绿圈、红时针、黑分针、1–12 数字
|
||
- [ ] 填写框中间有冒号
|
||
- [ ] 默认随机；切换整点/半点/刻钟后分针位置正确
|
||
- [ ] 换一换生成新题且不重复
|
||
- [ ] A4 下载打印清晰
|
||
- [ ] 分享、收藏、打印解锁链路正常
|
||
|
||
---
|
||
|
||
## 十、后续演进（非 MVP）
|
||
|
||
1. 定制页眉（日期/姓名/用时 + 装饰边框，更贴近教辅纸）
|
||
2. 对答案页 / 画指针题型
|
||
3. 5 分钟间隔、逐分钟进阶模式
|
||
4. AI 出题 tool：`generate_clock_reading({ timeMode, count: 12 })`
|