feat: 开发完成拼音每日一练
This commit is contained in:
R524809
@@ -0,0 +1,296 @@
|
||||
import {
|
||||
PINYIN_SECTIONS,
|
||||
type PinyinSection,
|
||||
type PinyinSubCategory,
|
||||
SHENGMU,
|
||||
DAN_YUNMU,
|
||||
FU_YUNMU,
|
||||
QIANBI_YUNMU,
|
||||
HOUBI_YUNMU,
|
||||
TESHU_YUNMU,
|
||||
ZHENGTI_RENDU,
|
||||
PINGSHEYIN,
|
||||
QIAOSHEYIN,
|
||||
} from '../../../core/data/pinyin';
|
||||
import { PINYIN_STYLE } from '../../shared/pinyinConstants';
|
||||
import { PinyinBaseDraw } from '../../shared/pinyinBaseDraw';
|
||||
import type { PinyinDictationData } from './pinyinDictationDraw';
|
||||
|
||||
const {
|
||||
MARGIN_X,
|
||||
CELL_H,
|
||||
CELL_H_V2,
|
||||
ROW_GAP,
|
||||
ROW_GAP_V2,
|
||||
SECTION_GAP,
|
||||
TITLE_AFTER_GAP,
|
||||
CONTENT_TOP_GAP,
|
||||
SECTION_TITLE_FONT,
|
||||
SUB_LABEL_FONT,
|
||||
SECTION_TITLE_COLOR,
|
||||
SUB_LABEL_COLOR,
|
||||
PINYIN_FONT_SIZE_RATIO,
|
||||
PINYIN_FONT_SIZE_RATIO_V2,
|
||||
} = PINYIN_STYLE;
|
||||
|
||||
const MIN_CELL_W = 44;
|
||||
const SUB_INDENT = 20;
|
||||
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;
|
||||
|
||||
/** V1 + V2 描红 / 默写练习 */
|
||||
export default class PinyinDictationSheetDraw extends PinyinBaseDraw {
|
||||
private cellW = MIN_CELL_W;
|
||||
private contentW = 0;
|
||||
private currentCellH = CELL_H;
|
||||
private currentRowGap = ROW_GAP;
|
||||
private currentFontSizeRatio = PINYIN_FONT_SIZE_RATIO;
|
||||
|
||||
async draw(data: PinyinDictationData) {
|
||||
this.prepareDraw();
|
||||
|
||||
this.contentW = this.canvasWidth - 2 * MARGIN_X;
|
||||
|
||||
if (data.mode.endsWith('-v2')) {
|
||||
this.cellW = this.contentW / 8;
|
||||
this.currentCellH = CELL_H_V2;
|
||||
this.currentRowGap = ROW_GAP_V2;
|
||||
this.currentFontSizeRatio = PINYIN_FONT_SIZE_RATIO_V2;
|
||||
} else {
|
||||
const maxCols = Math.floor(this.contentW / MIN_CELL_W);
|
||||
this.cellW = this.contentW / maxCols;
|
||||
this.currentCellH = CELL_H;
|
||||
this.currentRowGap = ROW_GAP;
|
||||
this.currentFontSizeRatio = PINYIN_FONT_SIZE_RATIO;
|
||||
}
|
||||
|
||||
await this.drawHeaderAndDivider();
|
||||
this.drawContent(data);
|
||||
}
|
||||
|
||||
// ── 内容入口 ──
|
||||
|
||||
private drawContent(data: PinyinDictationData) {
|
||||
const isTracing = data.mode.includes('tracing');
|
||||
let y = this.currentY + CONTENT_TOP_GAP;
|
||||
|
||||
if (data.mode.endsWith('-v2')) {
|
||||
this.drawV2Content(y, isTracing);
|
||||
} else {
|
||||
for (const section of PINYIN_SECTIONS) {
|
||||
y = this.drawV1Section(section, y, isTracing);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── V1：原有布局（声母 / 韵母 / 整体认读 + 子分类） ──
|
||||
|
||||
private drawV1Section(
|
||||
section: PinyinSection,
|
||||
startY: number,
|
||||
isTracing: boolean,
|
||||
): number {
|
||||
let y = startY;
|
||||
y = this.drawTitle(section.title, section.count, y);
|
||||
y += TITLE_AFTER_GAP;
|
||||
|
||||
y = this.drawItemRows(
|
||||
section.items,
|
||||
MARGIN_X,
|
||||
y,
|
||||
isTracing,
|
||||
this.cellW,
|
||||
this.currentCellH,
|
||||
);
|
||||
|
||||
if (section.subCategories && section.subCategories.length > 0) {
|
||||
y += SECTION_TO_SUB_GAP;
|
||||
y = this.drawSubCategories(section.subCategories, y, isTracing, section.key);
|
||||
}
|
||||
|
||||
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);
|
||||
} else {
|
||||
for (const sub of subCategories) {
|
||||
y = this.drawLabeledBlock(
|
||||
`${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.drawLabeledBlock(
|
||||
`翘舌音（${qiaoshe.count}个）`,
|
||||
qiaoshe.items,
|
||||
subX,
|
||||
startY,
|
||||
isTracing,
|
||||
);
|
||||
bottomY = Math.max(bottomY, endY);
|
||||
}
|
||||
|
||||
if (pingshe) {
|
||||
const endY = this.drawLabeledBlock(
|
||||
`平舌音（${pingshe.count}个）`,
|
||||
pingshe.items,
|
||||
col2X,
|
||||
startY,
|
||||
isTracing,
|
||||
);
|
||||
bottomY = Math.max(bottomY, endY);
|
||||
}
|
||||
|
||||
return bottomY + SUB_BLOCK_GAP;
|
||||
}
|
||||
|
||||
private drawLabeledBlock(
|
||||
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, this.currentCellH);
|
||||
}
|
||||
|
||||
// ── V2：8 列 + 扁平分块 ──
|
||||
|
||||
private drawV2Content(startY: number, isTracing: boolean): void {
|
||||
const sections = [
|
||||
{ title: '声母', count: 23, items: SHENGMU },
|
||||
{ title: '单韵母', count: 6, items: DAN_YUNMU },
|
||||
{ title: '复韵母', count: 8, items: FU_YUNMU },
|
||||
{ title: '前鼻韵母', count: 5, items: QIANBI_YUNMU },
|
||||
{ title: '后鼻韵母', count: 4, items: HOUBI_YUNMU },
|
||||
{ title: '特殊韵母', count: 1, items: TESHU_YUNMU },
|
||||
{ title: '整体认读音节', count: 16, items: ZHENGTI_RENDU },
|
||||
{ title: '平舌音', count: 3, items: PINGSHEYIN },
|
||||
{ title: '翘舌音', count: 4, items: QIAOSHEYIN },
|
||||
];
|
||||
|
||||
let y = startY;
|
||||
for (const section of sections) {
|
||||
y = this.drawTitle(section.title, section.count, y);
|
||||
y += TITLE_AFTER_GAP;
|
||||
y = this.drawFixedColsRows(section.items, MARGIN_X, y, isTracing, 8);
|
||||
y += SECTION_GAP;
|
||||
}
|
||||
}
|
||||
|
||||
// ── 共用绘制方法 ──
|
||||
|
||||
private drawTitle(title: string, count: number, y: number): number {
|
||||
const ctx = this.ctx;
|
||||
ctx.font = SECTION_TITLE_FONT;
|
||||
ctx.fillStyle = SECTION_TITLE_COLOR;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillText(title, MARGIN_X, y);
|
||||
|
||||
const titleW = ctx.measureText(title).width;
|
||||
ctx.fillStyle = SUB_LABEL_COLOR;
|
||||
ctx.fillText(`（${count}个）`, MARGIN_X + titleW, y);
|
||||
|
||||
return y;
|
||||
}
|
||||
|
||||
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));
|
||||
return this.drawFixedColsRows(items, startX, startY, isTracing, maxCols);
|
||||
}
|
||||
|
||||
private drawFixedColsRows(
|
||||
items: string[],
|
||||
startX: number,
|
||||
startY: number,
|
||||
isTracing: boolean,
|
||||
cols: number,
|
||||
): number {
|
||||
let y = startY;
|
||||
const cellW = this.cellW;
|
||||
const cellH = this.currentCellH;
|
||||
|
||||
for (let i = 0; i < items.length; i += cols) {
|
||||
const rowItems = items.slice(i, i + cols);
|
||||
|
||||
this.drawFourLineRow(startX, y, cols, cellW, cellH);
|
||||
|
||||
if (isTracing) {
|
||||
for (let j = 0; j < rowItems.length; j++) {
|
||||
const cx = startX + j * cellW + cellW / 2;
|
||||
this.drawPinyinText(rowItems[j], cx, y, cellH, this.currentFontSizeRatio);
|
||||
}
|
||||
}
|
||||
|
||||
y += cellH + this.currentRowGap;
|
||||
}
|
||||
|
||||
return y;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user