doodle-mini/docs/描红样式规范.md

描红/练字样式规范

配置文件：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     (无)
████████    ▓▓▓▓▓▓▓▓   ░░░░░░░░    ░░░░░░░░

---

使用方式

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