feat: 拼音字母选择

2026-05-19 18:24:43 +08:00
parent 39b8e01c23
commit b70e54d6b0
40 changed files with 1197 additions and 759 deletions
@@ -0,0 +1,601 @@
+/**
+ * 田字格练字服务
+ * 根据汉字列表绘制到Canvas
+ *
+ * 支持的汉字类型：
+ * - character：汉字
+ * - number：数字
+ * - letter：字母
+ * - symbol：符号
+ */
+import { BaseDrawService } from '../../../core/draw/baseDraw';
+import { GRID_COLORS, TRACING_COLORS } from '../../../core/data/tracingStyles';
+import { CharacterItem } from '../../../types/characterType';
+
+/**
+ * cnchar-data 坐标系配置
+ * 参考 hanzi-writer 的实现逻辑
+ * 字符数据的边界框：左上角 (0, -124)，右下角 (1024, 900)
+ */
+const CHAR_BOUNDS = {
+    minX: 0,
+    minY: -124,
+    maxX: 1024,
+    maxY: 900,
+};
+const CHAR_WIDTH = CHAR_BOUNDS.maxX - CHAR_BOUNDS.minX; // 1024
+const CHAR_HEIGHT = CHAR_BOUNDS.maxY - CHAR_BOUNDS.minY; // 1024
+
+/**
+ * 计算缩放变换参数（模仿 cnchar.draw 的 getScalingTransform 函数）
+ * 用于将 1024x1024 坐标系的字符数据变换到目标画布尺寸
+ */
+interface ScalingTransform {
+    xOffset: number;
+    yOffset: number;
+    scale: number;
+}
+
+function getScalingTransform(
+    width: number,
+    height: number,
+    padding: number,
+): ScalingTransform {
+    // 计算可用空间
+    const availableWidth = width - 2 * padding;
+    const availableHeight = height - 2 * padding;
+
+    // 计算缩放比例（取较小的比例以确保字符完整显示）
+    const scaleX = availableWidth / CHAR_WIDTH;
+    const scaleY = availableHeight / CHAR_HEIGHT;
+    const scale = Math.min(scaleX, scaleY);
+
+    // 计算偏移量（居中显示）
+    const scaledWidth = CHAR_WIDTH * scale;
+    const scaledHeight = CHAR_HEIGHT * scale;
+    const centerX = padding + (availableWidth - scaledWidth) / 2;
+    const centerY = padding + (availableHeight - scaledHeight) / 2;
+
+    // 计算 xOffset 和 yOffset（考虑字符边界框的偏移）
+    const xOffset = -CHAR_BOUNDS.minX * scale + centerX;
+    const yOffset = -CHAR_BOUNDS.minY * scale + centerY;
+
+    return { xOffset, yOffset, scale };
+}
+
+/**
+ * SVG 路径解析与绘制（支持 M/L/Q/Z 命令）
+ * 参考 cnchar.draw 的实现，使用 Canvas transform 进行坐标变换
+ */
+interface DrawSvgPathParams {
+    ctx: RenderingContext;
+    pathD: string;
+}
+
+function drawSvgPath({ ctx, pathD }: DrawSvgPathParams) {
+    // 使用正则表达式匹配 SVG 路径命令
+    // 支持 M（moveTo）、L（lineTo）、Q（二次贝塞尔曲线）、Z（closePath）
+    const commandRegex = /([MLQZ])([^MLQZ]*?)(?=[MLQZ]|$)/gi;
+    const commands: Array<{ cmd: string; coords: string }> = [];
+
+    let match;
+    while ((match = commandRegex.exec(pathD)) !== null) {
+        const cmd = match[1].toUpperCase();
+        const coords = match[2].trim();
+        commands.push({ cmd, coords });
+    }
+
+    // 解析坐标的辅助函数
+    const parseCoords = (coords: string): number[] => {
+        return coords
+            .split(/[\s,]+/)
+            .filter((part) => part.trim() !== '')
+            .map((part) => parseFloat(part));
+    };
+
+    for (const { cmd, coords } of commands) {
+        const coordValues = parseCoords(coords);
+
+        switch (cmd) {
+            case 'M':
+                if (coordValues.length >= 2) {
+                    ctx.moveTo(coordValues[0], coordValues[1]);
+                }
+                break;
+            case 'L':
+                if (coordValues.length >= 2) {
+                    ctx.lineTo(coordValues[0], coordValues[1]);
+                }
+                break;
+            case 'Q':
+                // 二次贝塞尔曲线：Q cpx cpy x y
+                if (coordValues.length >= 4) {
+                    ctx.quadraticCurveTo(
+                        coordValues[0],
+                        coordValues[1],
+                        coordValues[2],
+                        coordValues[3],
+                    );
+                }
+                break;
+            case 'Z':
+                ctx.closePath();
+                break;
+            default:
+                console.warn(`未知的 SVG 路径命令: ${cmd}`);
+        }
+    }
+}
+
+interface DrawStrokesParams {
+    ctx: RenderingContext;
+    strokes: string[];
+    offsetX: number;
+    offsetY: number;
+    size: number;
+    uptoInclusive: number;
+    fillStyle: string;
+    strokeStyle: string;
+    lineWidth: number;
+}
+
+/**
+ * 绘制笔画（参考 cnchar.draw 的实现方式）
+ * 使用 Canvas transform 进行坐标变换，支持 1024x1024 坐标系
+ */
+function drawStrokes({
+    ctx,
+    strokes,
+    offsetX,
+    offsetY,
+    size,
+    uptoInclusive,
+    fillStyle,
+    strokeStyle: _strokeStyle, // 保留接口兼容性，cnchar 模式只使用 fill
+    lineWidth: _lineWidth, // 保留接口兼容性，cnchar 模式只使用 fill
+}: DrawStrokesParams) {
+    // 抑制未使用变量警告
+    void _strokeStyle;
+    void _lineWidth;
+    // 设置 Canvas 绘制质量
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'high';
+
+    // 设置路径绘制属性
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.miterLimit = 10;
+
+    // 添加内边距：在田字格四周预留空间，避免笔画贴边
+    const padding = size * 0.1;
+
+    // 计算缩放变换参数（参考 cnchar.draw 的 getScalingTransform）
+    const transform = getScalingTransform(size, size, padding);
+
+    for (let s = 0; s <= uptoInclusive && s < strokes.length; s++) {
+        ctx.save();
+
+        // 应用变换矩阵（参考 cnchar.draw 的方式）
+        // 1. 先平移到目标位置
+        // 2. 再应用 Y 轴翻转和缩放
+        // transform: translate(xOffset, height - yOffset) scale(scale, -scale)
+        ctx.translate(
+            offsetX + transform.xOffset,
+            offsetY + size - transform.yOffset,
+        );
+        ctx.scale(transform.scale, -transform.scale);
+
+        // 绘制路径
+        ctx.beginPath();
+        drawSvgPath({ ctx, pathD: strokes[s] });
+
+        // 使用 fill 绘制（cnchar 只使用 fill）
+        ctx.fillStyle = fillStyle;
+        ctx.fill();
+
+        ctx.restore();
+    }
+}
+
+interface DrawTianZiGridParams {
+    ctx: RenderingContext;
+    x: number;
+    y: number;
+    size: number;
+    lineColor?: string;
+    boldColor?: string;
+}
+
+function drawTianZiGrid({
+    ctx,
+    x,
+    y,
+    size,
+    lineColor = GRID_COLORS.middleLine,
+    boldColor = GRID_COLORS.border,
+}: DrawTianZiGridParams) {
+    ctx.strokeStyle = boldColor;
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x - size / 2, y - size / 2, size, size);
+
+    ctx.strokeStyle = lineColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x, y - size / 2);
+    ctx.lineTo(x, y + size / 2);
+    ctx.moveTo(x - size / 2, y);
+    ctx.lineTo(x + size / 2, y);
+    ctx.stroke();
+    ctx.closePath();
+
+    ctx.strokeStyle = GRID_COLORS.diagonal;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x - size / 2, y - size / 2);
+    ctx.lineTo(x + size / 2, y + size / 2);
+    ctx.moveTo(x + size / 2, y - size / 2);
+    ctx.lineTo(x - size / 2, y + size / 2);
+    ctx.stroke();
+    ctx.closePath();
+}
+
+class WordDrawService extends BaseDrawService {
+    constructor(
+        canvas: Canvas,
+        ctx: RenderingContext,
+        options?: Record<string, any>,
+    ) {
+        options = options || {};
+        super(canvas, ctx, {
+            title: '田字格  练 字 贴',
+            subTitle: '按笔画临摹练习',
+            ...options,
+        });
+    }
+
+    /**
+     * 绘制页眉和基础布局
+     */
+    async drawLayout() {
+        this.setPrintConfig();
+        this.clear();
+        this.setPaper();
+
+        await this.drawHeader();
+        this.drawDivider();
+        await this.drawContentEmpty();
+    }
+
+    async drawContentEmpty() {
+        this.clearContentArea();
+        this.drawContent(null);
+        // await this.drawPrintFooter();
+    }
+
+    /**
+     * 绘制田字格和练字内容
+     * @param wordsMap 形如 { "其": ["M.. L.. Z", ...], ... }，不超过 10 个汉字
+     */
+    async drawPracticeContent(characters: CharacterItem[]) {
+        // 清空内容区域（页眉以下的部分）
+        this.clearContentArea();
+
+        // 绘制田字格和练字内容
+        this.drawContent(characters);
+        // await this.drawPrintFooter();
+    }
+
+    /**
+     * 清空内容区域（页眉以下的部分）
+     */
+    private clearContentArea() {
+        const { ctx } = this;
+        const contentStartY = this.currentY;
+
+        // 清空页眉以下的所有内容（使用逻辑像素）
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(
+            0,
+            contentStartY,
+            this.canvasWidth,
+            this.canvasHeight - contentStartY,
+        );
+    }
+
+    /**
+     * 绘制正文内容：两阶段绘制 - 先绘制空田字格，再绘制练字内容
+     */
+    /**
+     * 绘制正文内容：包括田字格的排布和内容
+     *
+     * minGap 作用解释：
+     *    minGap（最小列间距）用于田字格水平方向（每一行格子之间的间距）的初始最小值。它保证多个田字格在一行内不会紧贴排布、而是有一个最小的间隔，整体看起来不会拥挤。后续还会结合画布实际剩余空间动态调整为更合适的实际间距 actualColGap。
+     *
+     * rowGap 作用解释：
+     *    rowGap（行间距）用于田字格竖直方向（每一行田字格之间的间隔）的初始最小值。它防止行与行的田字格上下贴得太紧，增加一定的可视呼吸空间。之后同样会结合剩余空间动态调整为实际间距 actualRowGap。
+     */
+    drawContent(characterData: CharacterItem[] | null) {
+        const { ctx } = this;
+
+        // 布局参数（逻辑像素，原始尺寸除以3）
+        const topGap = 17; // 50/3≈17
+        const leftMargin = 40; // 120/3=40
+        const rightMargin = 40; // 120/3=40
+        const bottomMargin = 40; // 120/3=40
+        const contentTop = this.currentY + topGap;
+        const contentWidth = this.canvasWidth - leftMargin - rightMargin;
+        const contentHeight = this.canvasHeight - contentTop - bottomMargin;
+
+        const cellSize = 47; // 140/3≈47
+        // 统一通过 getMaxGridLayout 获取最大行列数
+        const { maxRow, maxCol } = this.getMaxGridLayout();
+
+        // 动态调整间距以充分利用空间（在允许的最小间距基础上弹性扩展以适配画布）
+        const actualRowGap =
+            maxRow > 1 ? (contentHeight - maxRow * cellSize) / (maxRow - 1) : 0;
+        const actualColGap =
+            maxCol > 1 ? (contentWidth - maxCol * cellSize) / (maxCol - 1) : 0;
+
+        // console.log(`布局信息: 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
+
+        // 第一阶段：绘制所有空田字格
+        this.drawEmptyGrids({
+            ctx,
+            startX: leftMargin,
+            startY: contentTop,
+            cellSize,
+            colGap: actualColGap,
+            rowGap: actualRowGap,
+            maxRow,
+            maxCol,
+        });
+
+        if (characterData && characterData.length > 0) {
+            // 第二阶段：绘制练字内容
+            this.drawPracticeContentInternal({
+                ctx,
+                characterData,
+                startX: leftMargin,
+                startY: contentTop,
+                cellSize,
+                colGap: actualColGap,
+                rowGap: actualRowGap,
+                maxCol,
+                maxRow,
+            });
+        }
+    }
+
+    /**
+     * 获取当前页面可绘制田字格的最大行数与列数（与绘制使用同一套计算规则）
+     */
+    getMaxGridLayout(): { maxRow: number; maxCol: number } {
+        // 布局参数需与 drawContent 保持一致（逻辑像素）
+        const topGap = 17; // 50/3≈17
+        const leftMargin = 40; // 120/3=40
+        const rightMargin = 40; // 120/3=40
+        const bottomMargin = 40; // 120/3=40
+        const contentTop = this.currentY + topGap;
+        const contentWidth = this.canvasWidth - leftMargin - rightMargin;
+        const contentHeight = this.canvasHeight - contentTop - bottomMargin;
+
+        const cellSize = 47; // 140/3≈47
+        const minGap = 8; // 24/3=8
+        const rowGap = 12; // 36/3=12
+
+        const maxCol = Math.max(
+            1,
+            Math.floor((contentWidth + minGap) / (cellSize + minGap)),
+        );
+        const maxRow = Math.max(
+            1,
+            Math.floor((contentHeight + rowGap) / (cellSize + rowGap)),
+        );
+
+        return { maxRow, maxCol };
+    }
+
+    /**
+     * 绘制空田字格网格
+     */
+    drawEmptyGrids({
+        ctx,
+        startX,
+        startY,
+        cellSize,
+        colGap,
+        rowGap,
+        maxRow,
+        maxCol,
+    }: {
+        ctx: RenderingContext;
+        startX: number;
+        startY: number;
+        cellSize: number;
+        colGap: number;
+        rowGap: number;
+        maxRow: number; // 行数
+        maxCol: number; // 列数
+    }) {
+        for (let row = 0; row < maxRow; row++) {
+            for (let col = 0; col < maxCol; col++) {
+                const x = startX + col * (cellSize + colGap) + cellSize / 2;
+                const y = startY + row * (cellSize + rowGap) + cellSize / 2;
+                drawTianZiGrid({ ctx, x, y, size: cellSize });
+            }
+        }
+    }
+
+    /**
+     * 绘制练字内容（参考 template.html 的实现）
+     */
+    drawPracticeContentInternal({
+        ctx,
+        characterData,
+        startX,
+        startY,
+        cellSize,
+        colGap,
+        rowGap,
+        maxCol,
+        maxRow,
+    }: {
+        ctx: RenderingContext;
+        characterData: CharacterItem[];
+        startX: number;
+        startY: number;
+        cellSize: number;
+        colGap: number;
+        rowGap: number;
+        maxCol: number;
+        maxRow: number;
+    }) {
+        let rowIndex = 0;
+
+        for (let i = 0; i < characterData.length; i++) {
+            const item = characterData[i];
+            const strokes = item.strokes;
+            const strokeCount = strokes.length;
+
+            const totalCells = 1 + strokeCount; // 预览 + 练习
+            const totalRows = Math.ceil(totalCells / maxCol);
+
+            if (rowIndex + totalRows > maxRow) {
+                break; // 放不下，停止绘制
+            }
+
+            for (let cellIdx = 0; cellIdx < totalCells; cellIdx++) {
+                const localRowOffset = Math.floor(cellIdx / maxCol);
+                const localColIndex = cellIdx % maxCol;
+                const globalRow = rowIndex + localRowOffset;
+                if (globalRow >= maxRow) {
+                    break;
+                }
+                if (cellIdx === 0) {
+                    this.drawPreviewCell({
+                        ctx,
+                        strokes,
+                        startX,
+                        startY,
+                        cellSize,
+                        colGap,
+                        rowGap,
+                        rowIndex: globalRow,
+                    });
+                } else {
+                    const strokeIndex = cellIdx - 1;
+                    this.drawPracticeCell({
+                        ctx,
+                        strokes,
+                        strokeIndex,
+                        startX,
+                        startY,
+                        cellSize,
+                        colGap,
+                        rowGap,
+                        rowIndex: globalRow,
+                        columnIndex: localColIndex,
+                    });
+                }
+            }
+
+            rowIndex = rowIndex + totalRows;
+        }
+    }
+
+    /**
+     * 绘制预览格（完整汉字）
+     */
+    drawPreviewCell({
+        ctx,
+        strokes,
+        startX,
+        startY,
+        cellSize,
+        colGap,
+        rowGap,
+        rowIndex,
+    }: {
+        ctx: RenderingContext;
+        strokes: string[];
+        startX: number;
+        startY: number;
+        cellSize: number;
+        colGap: number;
+        rowGap: number;
+        rowIndex: number;
+    }) {
+        const columnIndex = 0;
+        const x = startX + columnIndex * (cellSize + colGap);
+        const y = startY + rowIndex * (cellSize + rowGap);
+
+        // console.log(`预览格 [${rowIndex}, ${columnIndex}] 坐标: (${x}, ${y}), 笔画数: ${strokes.length}`);
+
+        // 绘制完整汉字（深灰色，Fill + Stroke模式）
+        // 参考一般练字贴：预览字使用深灰色，不是纯黑色，更柔和护眼
+        drawStrokes({
+            ctx,
+            strokes,
+            offsetX: x,
+            offsetY: y,
+            size: cellSize,
+            uptoInclusive: strokes.length - 1,
+            fillStyle: TRACING_COLORS.reference,
+            strokeStyle: TRACING_COLORS.reference,
+            lineWidth: 1.2,
+        });
+    }
+
+    /**
+     * 绘制练习格（逐笔画）
+     */
+    drawPracticeCell({
+        ctx,
+        strokes,
+        strokeIndex,
+        startX,
+        startY,
+        cellSize,
+        colGap,
+        rowGap,
+        rowIndex,
+        columnIndex,
+    }: {
+        ctx: RenderingContext;
+        strokes: string[];
+        strokeIndex: number;
+        startX: number;
+        startY: number;
+        cellSize: number;
+        colGap: number;
+        rowGap: number;
+        rowIndex: number;
+        columnIndex: number;
+    }) {
+        const x = startX + columnIndex * (cellSize + colGap);
+        const y = startY + rowIndex * (cellSize + rowGap);
+
+        // console.log(`练习格 [${rowIndex}, ${columnIndex}] 坐标: (${x}, ${y}), 笔画: ${strokeIndex + 1}/${strokes.length}`);
+
+        // 绘制到指定笔画的汉字（浅灰色，Fill + Stroke模式）
+        // 参考一般练字贴：练习字使用浅灰色，便于临摹
+        drawStrokes({
+            ctx,
+            strokes,
+            offsetX: x,
+            offsetY: y,
+            size: cellSize,
+            uptoInclusive: strokeIndex,
+            fillStyle: TRACING_COLORS.guide,
+            strokeStyle: TRACING_COLORS.guide,
+            lineWidth: 1.2,
+        });
+    }
+
+    // drawDivider 已在基类中实现，此方法保留以保持兼容
+    drawDivider() {
+        super.drawDivider();
+    }
+}
+
+export default WordDrawService;
@@ -1,4 +1,4 @@
-import WordDrawService from '../../service/wordDrawService';
+import WordDrawService from './draw/wordDrawService';
 import { downloadPrint } from '../../utils/downloadPrint';
 import { getWordsSvgData } from '../../utils/getWordsSvgJson';
 import { WORDS } from '../../core/data/words';
@@ -7,11 +7,11 @@
 * - find：找字模板
 *
 * 支持的绘制服务：
- * - TextDrawService：文字涂色服务
+ * - WordColoringDraw：文字涂色服务
 * - FindWordDrawService：找字涂色服务
 */

-import TextDrawService from './textDrawService';
+import WordColoringDraw from './wordColoringDraw';
 import FindWordDrawService from './findWordDrawService';

 /**
@@ -49,12 +49,12 @@ export class DrawServiceFactory {
    ): IDrawService {
        switch (templateType) {
            case 'grid':
-                return new TextDrawService(canvas, ctx, options);
+                return new WordColoringDraw(canvas, ctx, options);
            case 'find':
                return new FindWordDrawService(canvas, ctx, options);
            default:
                // 默认使用网格模板
-                return new TextDrawService(canvas, ctx, options);
+                return new WordColoringDraw(canvas, ctx, options);
        }
    }
 }
@@ -48,7 +48,7 @@ function calculateCircleCenters(
    return centers;
 }

-class TextDrawService extends BaseDrawService {
+class WordColoringDrawService extends BaseDrawService {
    colors: string[];
    characters: string[];

@@ -204,4 +204,4 @@ class TextDrawService extends BaseDrawService {
    }
 }

-export default TextDrawService;
+export default WordColoringDrawService;
@@ -3,7 +3,7 @@ import { WORDS } from '../../core/data/words';
 import {
    DrawServiceFactory,
    type IDrawService,
-} from '../shared/draw/drawServiceFactory';
+} from './draw/drawServiceFactory';
 import { createPage, type CanvasDataState } from '../../base/pageMixin';
 import { defaultShareConfig } from '../../config/config';
 import {