feat: 拼音字母选择

2026-05-19 18:24:43 +08:00
parent 39b8e01c23
commit b70e54d6b0
40 changed files with 1197 additions and 759 deletions
@@ -0,0 +1,94 @@
+# 描红/练字样式规范
+
+> 配置文件：`miniprogram/core/data/tracingStyles.ts`
+
+## 设计原则
+
+- **格子线条**：使用护眼绿色系，打印清晰且长时间书写不疲劳
+- **描红字体**：使用中性灰色，不带色彩偏向，打印友好
+- **统一管理**：所有绘制服务引用 `tracingStyles.ts`，避免硬编码
+
+---
+
+## 格子线条颜色
+
+适用于田字格（汉字）、四线三格（拼音/英文字母）。
+
+| 用途 | 色值 | 色块 | 说明 |
+|------|------|------|------|
+| 外框/实线 | `#7fb069` | 🟩 中等绿 | 外框、上下实线、垂直分隔线 |
+| 中线/虚线 | `#a8d5a8` | 🟩 浅绿 | 田字格十字线、四线三格中间两条虚线 |
+| 对角线 | `#d4f0d4` | ⬜ 极淡绿 | 田字格对角辅助线（四线三格不使用） |
+
+### 四线三格结构
+
+```
+─────────────────  ← 上线（实线，#7fb069）
+- - - - - - - - -  ← 中上线（虚线，#a8d5a8）
+- - - - - - - - -  ← 中下线（虚线，#a8d5a8）
+─────────────────  ← 下线（实线，#7fb069）
+│               │  ← 垂直分隔线（实线，#7fb069）
+```
+
+### 田字格结构
+
+```
+┌───────┬───────┐  ← 外框（#7fb069）
+│   ╲   │   ╱   │
+│─ ─ ─ ─│─ ─ ─ ─│  ← 横中线（#a8d5a8）
+│   ╱   │   ╲   │     对角线（#d4f0d4）
+└───────┴───────┘
+```
+
+虚线样式：`[3, 3]`
+
+---
+
+## 描红字体颜色
+
+适用于汉字描红、拼音描红、英文字母描红。
+
+| 用途 | 色值 | 色块 | 说明 |
+|------|------|------|------|
+| 参照字/预览字 | `#555555` | ⬛ 深灰 | 完整展示字形供对照，如首格预览 |
+| 描红引导字 | `#d0d0d0` | ⬜ 中性灰 | 跟着描写的半透明字，标准描红色 |
+| 极浅引导字 | `#e0e0e0` | ⬜ 浅灰 | 水印效果，更轻的引导 |
+| 首笔/强调 | `#1a1a1a` | ⬛ 近黑 | 参照格首字母，黑色标示 |
+
+### 颜色梯度示意
+
+```
+首笔参照  →  参照字  →  描红引导  →  极浅引导  →  空白
+#1a1a1a     #555555    #d0d0d0     #e0e0e0     (无)
+████████    ▓▓▓▓▓▓▓▓   ░░░░░░░░    ░░░░░░░░
+```
+
+---
+
+## 使用方式
+
+```typescript
+import { GRID_COLORS, GRID_DASH, TRACING_COLORS } from '../../core/data/tracingStyles';
+
+// 格子线条
+ctx.strokeStyle = GRID_COLORS.border;      // 外框
+ctx.strokeStyle = GRID_COLORS.middleLine;  // 虚线
+ctx.strokeStyle = GRID_COLORS.diagonal;    // 对角线
+ctx.setLineDash([...GRID_DASH]);           // 虚线样式
+
+// 描红字体
+ctx.fillStyle = TRACING_COLORS.reference;  // 预览字
+ctx.fillStyle = TRACING_COLORS.guide;      // 描红引导
+ctx.fillStyle = TRACING_COLORS.guideLight; // 极浅引导
+ctx.fillStyle = TRACING_COLORS.strong;     // 首笔黑色
+```
+
+## 应用范围
+
+| 绘制服务 | 文件路径 |
+|---------|---------|
+| 拼音描红 | `pinyinPages/pinyinDictation/draw/pinyinDictationDraw.ts` |
+| 田字格练字 | `service/wordDrawService.ts` |
+| 英文字母描红 | `englishPages/shared/draw/drawTools.ts` |
+| 英文各模式 | `englishPages/letterTracing/draw/*.ts` |
+| 英文数据生成 | `englishPages/letterTracing/generators/letter-tracing-generator.ts` |