feat:2.6.2 增加数字点连线、数物填写等涂色卡

miniprogram/mathPages/shared/service/numberObjectMatchDraw.ts

@@ -43,13 +43,13 @@ class NumberObjectMatchDraw extends BaseDrawService {
     /**
      * 绘制数物对应内容
      */
-    async draw(matchData: NumberObjectMatchData) {
-        if (
-            !matchData ||
-            !matchData.gridImages ||
-            !matchData.bottomImages ||
-            !matchData.bottomNumbers
-        ) {
+    async draw(matchData: NumberObjectMatchData, mode: string = 'match') {
+        if (!matchData || !matchData.gridImages || !matchData.bottomImages) {
+            return;
+        }
+
+        // 连线模式需要 bottomNumbers，填写模式不需要
+        if (mode === 'match' && !matchData.bottomNumbers) {
             return;
         }
 
@@ -62,6 +62,7 @@ class NumberObjectMatchDraw extends BaseDrawService {
             matchData: this.matchData,
             canvasWidth: this.canvasWidth,
             startY: this.currentY,
+            mode: mode,
         });
     }
 
@@ -74,8 +75,9 @@ class NumberObjectMatchDraw extends BaseDrawService {
         matchData: NumberObjectMatchData;
         canvasWidth: number;
         startY: number;
+        mode?: string; // 'match' 连线 或 'fill' 填写
     }): Promise<void> {
-        const { canvas, ctx, matchData, canvasWidth } = params;
+        const { canvas, ctx, matchData, canvasWidth, mode = 'match' } = params;
         let { startY } = params;
 
         startY = startY + 25;
@@ -140,8 +142,127 @@ class NumberObjectMatchDraw extends BaseDrawService {
         this.drawDashedDivider(dividerY, margin);
 
         // ========== 绘制下面区域 ==========
+        if (mode === 'fill') {
+            // 填写模式：两行四列网格
+            await this.drawFillMode({
+                canvas,
+                ctx,
+                matchData,
+                canvasWidth,
+                dividerY,
+                margin,
+            });
+        } else {
+            // 连线模式：保持原有逻辑
+            await this.drawMatchMode({
+                canvas,
+                ctx,
+                matchData,
+                canvasWidth,
+                dividerY,
+                margin,
+            });
+        }
+    }
+
+    /**
+     * 绘制填写模式
+     */
+    private async drawFillMode(params: {
+        canvas: WechatMiniprogram.Canvas;
+        ctx: RenderingContext;
+        matchData: NumberObjectMatchData;
+        canvasWidth: number;
+        dividerY: number;
+        margin: number;
+    }): Promise<void> {
+        const { canvas, ctx, matchData, canvasWidth, dividerY, margin } =
+            params;
+
+        const bottomStartY = dividerY + 30;
+        const bottomImageSize = 75; // 下面图片大小
+        const imagePadding = 10; // 图片内边距
+        const bottomBoxSize = bottomImageSize + imagePadding * 2; // 图片框大小
+        const gridRows = 2; // 两行
+        const gridCols = 4; // 四列
+        const cellSize = bottomBoxSize; // 格子大小
+
+        // 计算网格总宽度
+        const gridWidth = cellSize * gridCols;
+        const gridStartX = margin + (canvasWidth - margin * 2 - gridWidth) / 2; // 居中
+
+        // 绘制网格线
+        this.drawGridLines(
+            gridStartX,
+            bottomStartY,
+            cellSize,
+            cellSize,
+            gridCols,
+            gridRows,
+        );
+
+        // 第一行：绘制图片
+        for (let i = 0; i < matchData.bottomImages.length; i++) {
+            const item = matchData.bottomImages[i];
+            const col = i;
+            const boxX = gridStartX + col * cellSize;
+            const boxY = bottomStartY;
+            const imageX = boxX + imagePadding;
+            const imageY = boxY + imagePadding;
+
+            // 加载并绘制图片
+            let image: any = null;
+            try {
+                const imagePath = `/mathPages/shared/assets/${item.folder}/${item.imageIndex}.png`;
+                image = await getImage(canvas, imagePath);
+            } catch (error) {
+                console.error(
+                    `加载图片失败: ${item.folder}/${item.imageIndex}`,
+                    error,
+                );
+                continue;
+            }
+
+            if (image) {
+                // 计算图片高度（等比例缩放）
+                // @ts-ignore - 微信小程序图片对象有 width 和 height 属性
+                const scaledHeight =
+                    (image.height / image.width) * bottomImageSize;
+
+                // 绘制图片（居中）
+                const drawImageX =
+                    imageX + (bottomImageSize - bottomImageSize) / 2;
+                const drawImageY =
+                    imageY + (bottomImageSize - scaledHeight) / 2;
+                ctx.drawImage(
+                    image,
+                    drawImageX,
+                    drawImageY,
+                    bottomImageSize,
+                    scaledHeight,
+                );
+            }
+        }
+
+        // 第二行：空着，让小朋友填写数字（只绘制网格线，不绘制内容）
+    }
+
+    /**
+     * 绘制连线模式
+     */
+    private async drawMatchMode(params: {
+        canvas: WechatMiniprogram.Canvas;
+        ctx: RenderingContext;
+        matchData: NumberObjectMatchData;
+        canvasWidth: number;
+        dividerY: number;
+        margin: number;
+    }): Promise<void> {
+        const { canvas, ctx, matchData, canvasWidth, dividerY, margin } =
+            params;
         const bottomStartY = dividerY + 30;
         const bottomImageSize = 50; // 下面图片大小
+        const imagePadding = 10; // 图片内边距
         const bottomBoxSize = bottomImageSize + imagePadding * 2; // 图片框大小
         const bottomSpacing = 40; // 图片间距
         const bottomRowSpacing = 80; // 两行间距