R524809
95 lines
3.3 KiB
Markdown
95 lines
3.3 KiB
Markdown
# 描红/练字样式规范
|
||
|
||
> 配置文件：`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` |
|