# 描红/练字样式规范

> 配置文件：`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` |