joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 开发完成拼音每日一练

Browse Source
This commit is contained in:
R524809
2026-05-20 15:33:06 +08:00
parent cab4e9c33f
commit d52339c0fa
25 changed files with 1478 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pinyinPages/pinyinDictation/draw/pinyinDictationDraw.ts
+18 -312
View File
@@ -1,327 +1,33 @@
import { BaseDrawService } from '../../../core/draw/baseDraw';
import {
PINYIN_SECTIONS,
type PinyinSection,
type PinyinSubCategory,
} from '../../../core/data/pinyin';
import {
GRID_COLORS,
GRID_DASH,
TRACING_COLORS,
} from '../../../core/data/tracingStyles';
import type { PinyinDictationMode } from '../pinyinDictation.config';
import { TONEOZ_PINYIN, fontFamilyOf } from '../../../core/font/fontProfiles';
import PinyinDictationSheetDraw from './PinyinDictationSheetDraw';
import PinyinDailyDraw from './PinyinDailyDraw';
export interface PinyinDictationData {
mode: PinyinDictationMode;
dayIndex?: number;
}
// ── 布局 ──
const MARGIN_X = 24; // 左右页边距
const MIN_CELL_W = 44; // 格子最小宽度，实际宽度按内容区等分后可能略大
const CELL_H = 30; // 四线三格高度
const ROW_GAP = 5; // 同一分类中，行与行之间的纵向间距
const SUB_INDENT = 20; // 子分类（翘舌音、单韵母等）相对 MARGIN_X 的额外缩进
// ── 垂直间距 ──
const CONTENT_TOP_GAP = 8; // Header 分割线到第一个分类标题的间距
const TITLE_AFTER_GAP = 24; // 分类标题（一、声母）到其下方格子的间距
const SECTION_GAP = 8; // 大分类之间（声母 ↔ 韵母 ↔ 整体认读）的间距
const SECTION_TO_SUB_GAP = 8; // 主格子到「其中——」的间距
const QIZHONG_GAP = 16; // 「其中——」到第一个子分类块的间距
const SUB_LABEL_H = 14; // 子分类标签文字占用高度
const SUB_LABEL_GAP = 4; // 子分类标签到其下方格子的间距
const SUB_BLOCK_GAP = 8; // 相邻子分类块之间的间距
// ── 字体 & 颜色 ──
const SECTION_TITLE_FONT = 'bold 14px "Microsoft Yahei"'; // 大分类标题
const SUB_LABEL_FONT = '11px "Microsoft Yahei"'; // 子分类标签
const SECTION_TITLE_COLOR = '#322E25'; // 标题/标签文字色
const SUB_LABEL_COLOR = '#c0392b'; // 「其中——」文字色
/**
* 拼音听写/描红绘制分发层。
* 根据 data.mode 委托给对应的独立 DrawService 完成实际绘制。
*/
export default class PinyinDictationDraw extends BaseDrawService {
private cellW = MIN_CELL_W;
private contentW = 0;
async draw(data: PinyinDictationData) {
this.prepareDraw();
this.contentW = this.canvasWidth - 2 * MARGIN_X;
const maxCols = Math.floor(this.contentW / MIN_CELL_W);
this.cellW = this.contentW / maxCols;
await this.drawHeaderAndDivider();
this.drawContent(data);
}
private drawContent(data: PinyinDictationData) {
const isTracing = data.mode === 'pinyin-tracing';
let y = this.currentY + CONTENT_TOP_GAP;
for (const section of PINYIN_SECTIONS) {
y = this.drawSection(section, y, isTracing);
}
}
private drawSection(
section: PinyinSection,
startY: number,
isTracing: boolean,
): number {
const ctx = this.ctx;
let y = startY;
ctx.font = SECTION_TITLE_FONT;
ctx.fillStyle = SECTION_TITLE_COLOR;
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(`${section.title}（${section.count}个）`, MARGIN_X, y);
y += TITLE_AFTER_GAP;
y = this.drawItemRows(
section.items,
MARGIN_X,
y,
isTracing,
this.cellW,
CELL_H,
);
if (section.subCategories && section.subCategories.length > 0) {
y += SECTION_TO_SUB_GAP;
y = this.drawSubCategories(
section.subCategories,
y,
isTracing,
section.key,
if (data.mode === 'pinyin-daily') {
const delegate = new PinyinDailyDraw(
this.canvas,
this.ctx,
this.options,
);
}
y += SECTION_GAP;
return y;
}
private drawSubCategories(
subCategories: PinyinSubCategory[],
startY: number,
isTracing: boolean,
sectionKey: string,
): number {
const ctx = this.ctx;
let y = startY;
ctx.font = SUB_LABEL_FONT;
ctx.fillStyle = SUB_LABEL_COLOR;
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('其中——', MARGIN_X, y);
y += QIZHONG_GAP;
const subX = MARGIN_X + SUB_INDENT;
if (sectionKey === 'shengmu') {
y = this.drawShengmuSubs(subCategories, subX, y, isTracing);
await delegate.draw(data.dayIndex ?? 0);
} else {
for (const sub of subCategories) {
y = this.drawLabeledSubBlock(
`${sub.label}（${sub.count}个）`,
sub.items,
subX,
y,
isTracing,
);
y += SUB_BLOCK_GAP;
}
}
return y;
}
/**
* 声母子分类：翘舌音 / 平舌音左右并列，标签在格子上方
*/
private drawShengmuSubs(
subs: PinyinSubCategory[],
subX: number,
startY: number,
isTracing: boolean,
): number {
const qiaoshe = subs.find((s) => s.key === 'qiaoshe');
const pingshe = subs.find((s) => s.key === 'pingshe');
const col2X = MARGIN_X + Math.round(this.contentW / 2);
let bottomY = startY;
if (qiaoshe) {
const endY = this.drawLabeledSubBlock(
`翘舌音（${qiaoshe.count}个）`,
qiaoshe.items,
subX,
startY,
isTracing,
const delegate = new PinyinDictationSheetDraw(
this.canvas,
this.ctx,
this.options,
);
bottomY = Math.max(bottomY, endY);
await delegate.draw(data);
}
if (pingshe) {
const endY = this.drawLabeledSubBlock(
`平舌音（${pingshe.count}个）`,
pingshe.items,
col2X,
startY,
isTracing,
);
bottomY = Math.max(bottomY, endY);
}
return bottomY + SUB_BLOCK_GAP;
}
/**
* 带标签的子分类块：标签在格子上方
*/
private drawLabeledSubBlock(
label: string,
items: string[],
startX: number,
startY: number,
isTracing: boolean,
): number {
const ctx = this.ctx;
let y = startY;
ctx.save();
ctx.font = SUB_LABEL_FONT;
ctx.fillStyle = SECTION_TITLE_COLOR;
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(label, startX, y);
ctx.restore();
y += SUB_LABEL_H + SUB_LABEL_GAP;
return this.drawItemRows(
items,
startX,
y,
isTracing,
this.cellW,
CELL_H,
);
}
/**
* 绘制四线三格拼音行，同一行的格子共享边框
*/
private drawItemRows(
items: string[],
startX: number,
startY: number,
isTracing: boolean,
cellW: number,
cellH: number,
): number {
const maxWidth = this.canvasWidth - startX - MARGIN_X;
const maxCols = Math.max(1, Math.floor(maxWidth / cellW));
let y = startY;
for (let i = 0; i < items.length; i += maxCols) {
const rowItems = items.slice(i, i + maxCols);
const cols = rowItems.length;
this.drawFourLineRow(startX, y, cols, cellW, cellH);
if (isTracing) {
for (let j = 0; j < cols; j++) {
const cx = startX + j * cellW + cellW / 2;
this.drawPinyinText(rowItems[j], cx, y, cellH);
}
}
y += cellH + ROW_GAP;
}
return y;
}
/**
* 绘制一行四线三格
*/
private drawFourLineRow(
x: number,
y: number,
cols: number,
cellW: number,
cellH: number,
) {
const ctx = this.ctx;
const totalW = cols * cellW;
const yTop = y;
const y1 = y + cellH / 3;
const y2 = y + (cellH * 2) / 3;
const yBot = y + cellH;
ctx.lineWidth = 1;
ctx.strokeStyle = GRID_COLORS.border;
ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(x, yTop);
ctx.lineTo(x + totalW, yTop);
ctx.stroke();
ctx.strokeStyle = GRID_COLORS.middleLine;
ctx.setLineDash([...GRID_DASH]);
ctx.beginPath();
ctx.moveTo(x, y1);
ctx.lineTo(x + totalW, y1);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y2);
ctx.lineTo(x + totalW, y2);
ctx.stroke();
ctx.strokeStyle = GRID_COLORS.border;
ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(x, yBot);
ctx.lineTo(x + totalW, yBot);
ctx.stroke();
for (let i = 0; i <= cols; i++) {
const vx = x + i * cellW;
ctx.beginPath();
ctx.moveTo(vx, yTop);
ctx.lineTo(vx, yBot);
ctx.stroke();
}
}
/**
* 在四线三格中绘制拼音：
* alphabetic 基线对齐第 3 条线（中下虚线），
* 小写字母主体填充中间格（第 2~3 线之间），
* 声调标记占据上格（第 1~2 线之间）。
*/
private drawPinyinText(
pinyin: string,
cx: number,
gridY: number,
gridH: number,
) {
const ctx = this.ctx;
const fontSize = Math.round(gridH * 0.65);
const baselineY = gridY + (gridH * 2) / 3;
ctx.save();
ctx.font = `${fontSize}px ${fontFamilyOf(TONEOZ_PINYIN)}`;
ctx.fillStyle = TRACING_COLORS.guide;
ctx.textAlign = 'center';
ctx.textBaseline = 'alphabetic';
ctx.fillText(pinyin, cx, baselineY);
ctx.restore();
}
}