feat: 完成四种字母描红开发

2026-04-17 17:03:36 +08:00
parent 15ad5cce75
commit 9febf7da4f
16 changed files with 479 additions and 480 deletions
@@ -0,0 +1,124 @@
+import { BaseDrawService } from '../../../core/draw/baseDraw';
+import type {
+    LetterTracingData,
+    TracingRow,
+} from '../generators/letter-tracing-generator';
+import { fontFamilyOf } from '../data/fontProfiles';
+import {
+    calcLetterFontSizes,
+    drawFourLineGrid,
+    drawLetterInFourLineGrid,
+    FOUR_LINE_GRID_H,
+    type LetterFontSizes,
+} from './drawTools';
+
+const COLOR_BLACK = '#1a1a1a';
+const COLOR_LIGHT_RED = '#FF8E8E';
+const COLUMN_GUTTER = 18;
+
+type TwoColumnData = Extract<
+    LetterTracingData,
+    { mode: 'letter-tracing-two-column' }
+>;
+
+/**
+ * 两列练习绘制：
+ * 左栏 A–M（Aa Bb … Mm）、右栏 N–Z（Nn Oo … Zz），每栏 13 行。
+ * 每行一个完整四线三格，格内绘制大小写配对字母。
+ * 第一行黑色示范，后续行浅红色渐淡。两栏间距 18px。
+ */
+export default class TwoColumnDraw extends BaseDrawService {
+    private letterSizes: LetterFontSizes =
+        calcLetterFontSizes(FOUR_LINE_GRID_H);
+
+    async draw(data: TwoColumnData) {
+        this.prepareDraw();
+        await this.drawHeaderAndDivider();
+        this.drawContent(data.leftRows, data.rightRows);
+        this.drawPrintFooter();
+    }
+
+    private drawContent(leftRows: TracingRow[], rightRows: TracingRow[]) {
+        const M = 24;
+        const lineW = this.canvasWidth - M * 2;
+        const colW = (lineW - COLUMN_GUTTER) / 2;
+        const maxR = Math.max(leftRows.length, rightRows.length);
+
+        const footerReserve = 56;
+        const availableH =
+            this.canvasHeight - this.currentY - footerReserve - 12;
+        const rowGap = Math.max(
+            4,
+            (availableH - maxR * FOUR_LINE_GRID_H) / (maxR + 1),
+        );
+        const y0 = this.currentY + rowGap;
+
+        const leftX = M;
+        const rightX = M + colW + COLUMN_GUTTER;
+
+        for (let i = 0; i < maxR; i++) {
+            const y = y0 + i * (FOUR_LINE_GRID_H + rowGap);
+
+            if (i < leftRows.length) {
+                drawFourLineGrid(this.ctx, leftX, y, colW, FOUR_LINE_GRID_H);
+                this.drawPairRow(leftRows[i], leftX, y, colW);
+            }
+            if (i < rightRows.length) {
+                drawFourLineGrid(this.ctx, rightX, y, colW, FOUR_LINE_GRID_H);
+                this.drawPairRow(rightRows[i], rightX, y, colW);
+            }
+        }
+    }
+
+    /**
+     * 在一个四线三格内绘制大小写配对（如 A a）。
+     * rowIndex=0 黑色示范，>0 浅红色。
+     * cells 里每个 cell 的 char 是大写、pairChar 是小写，
+     * 按 repetitions 排列（第一个实色 → 后续渐淡）。
+     */
+    private drawPairRow(row: TracingRow, x: number, y: number, colW: number) {
+        const fontFamily = fontFamilyOf(this.letterSizes._profile);
+        const cells = row.cells;
+        const n = cells.length;
+        if (n === 0) return;
+
+        const pairCount = n;
+        const slotW = colW / pairCount;
+
+        const pairGap = 25;
+
+        for (let i = 0; i < pairCount; i++) {
+            const cell = cells[i];
+            const color = i === 0 ? COLOR_BLACK : COLOR_LIGHT_RED;
+            const alpha = i >= pairCount - 2 ? 0.5 : 1;
+            const pairCx = x + i * slotW + slotW / 2;
+
+            this.ctx.save();
+            this.ctx.globalAlpha = alpha;
+
+            drawLetterInFourLineGrid(
+                this.ctx,
+                cell.char,
+                pairCx - pairGap / 2,
+                y,
+                FOUR_LINE_GRID_H,
+                this.letterSizes,
+                { fontFamily, color },
+            );
+
+            if (cell.pairChar) {
+                drawLetterInFourLineGrid(
+                    this.ctx,
+                    cell.pairChar,
+                    pairCx + pairGap / 2,
+                    y,
+                    FOUR_LINE_GRID_H,
+                    this.letterSizes,
+                    { fontFamily, color },
+                );
+            }
+
+            this.ctx.restore();
+        }
+    }
+}