feat:添加按数字涂颜色

miniprogram/app.json

@@ -10,7 +10,7 @@
         {
             "root": "mathPages",
             "name": "mathPages",
-            "pages": ["numberColor/numberColor"],
+            "pages": ["numberFind/numberFind", "countMatch/countMatch"],
             "independent": false
         }
     ],

miniprogram/constants/mathFunctions.ts

@@ -9,26 +9,28 @@ export interface MathFunctionType {
 export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
     {
         id: 'number-find',
-        page: 'numberColor',
-        title: '看数字，涂一涂',
-        desc: '看数字，找一找下面相同的数字，涂上颜色',
+        page: 'numberFind',
+        title: '找数字，涂一涂',
+        desc: '找一找下面相同的数字，涂上颜色',
         icon: '🔍',
     },
+    {
+        id: 'number-coloring',
+        page: 'countMatch',
+        title: '按数字，涂颜色',
+        desc: '根据数字给相应的圆圈涂色，巩固数字与数量的认知',
+        icon: '🎨',
+    },
     {
         id: 'number-write',
-        page: 'numberColor',
+        page: 'numberFind',
         title: '看数字，写一写',
         desc: '看数字，按笔画顺序写一写',
         icon: '✏️',
     },
-    {
-        id: 'number-coloring',
-        title: '数字涂色卡',
-        desc: '一边写数字、一边学数数，数字和卡通图片一一对应',
-        icon: '🎨',
-    },
     {
         id: 'counting-matching',
+        page: 'countMatch',
         title: '数一数，连一连',
         desc: '通过连线配对数字和对应的数量图形',
         icon: '🔗',

miniprogram/mathPages/countMatch/countMatch.json

@@ -0,0 +1,12 @@
+{
+    "navigationBarTitleText": "数一数，连一连",
+    "navigationBarBackgroundColor": "#FFD719",
+    "homeButton": true,
+    "backgroundColor": "#F6F6F6",
+    "enablePullDownRefresh": false,
+    "usingComponents": {
+        "toy-button": "../../ui/button/button",
+        "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
+        "van-action-sheet": "../../miniprogram_npm/@vant/weapp/action-sheet/index"
+    }
+}

miniprogram/mathPages/countMatch/countMatch.less

@@ -0,0 +1,106 @@
+page {
+    background-color: #f6f6f6;
+}
+
+.page-container {
+    background-color: #f6f6f6;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+    padding-bottom: 160rpx; // 为底部按钮预留空间
+
+    .empty {
+        height: 50rpx;
+    }
+}
+
+.wrapper {
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    padding: 36rpx 24rpx;
+    box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
+    margin: 30rpx 0;
+    display: flex;
+    flex-direction: column;
+
+    .wrapper-title {
+        font-size: 32rpx;
+        color: #141414;
+        margin-bottom: 36rpx;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    .canvas-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 400rpx;
+        background: #f8f9fa;
+        border-radius: 12rpx;
+        border: 2rpx dashed #dee2e6;
+    }
+
+    .canvas-content {
+        max-width: 100%;
+        border-radius: 8rpx;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+    }
+
+    .random-button-area {
+        margin-top: 40rpx;
+        display: flex;
+        align-items: center;
+        gap: 20rpx;
+
+        .type-selector {
+            flex: 1; // 占据剩余空间
+            height: 80rpx;
+            background-color: #fff;
+            border: 2rpx solid #e5e5e5;
+            border-radius: 16rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 24rpx;
+            box-sizing: border-box;
+
+            .type-selector-text {
+                font-size: 28rpx;
+                color: #333;
+            }
+
+            .type-selector-arrow {
+                font-size: 20rpx;
+                color: #999;
+            }
+        }
+
+        .random-button {
+            flex: 2;
+        }
+    }
+}
+
+// /* ActionSheet 自定义样式 */
+// .custom-action-sheet {
+//     border-radius: 16rpx 16rpx 0 0 !important;
+// }
+
+/* 底部按钮区域 */
+.bottom-btn-box {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 180rpx;
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+    box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15);
+    padding: 24rpx;
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: border-box;
+    border-radius: 16rpx 16rpx 0 0;
+    z-index: 2;
+}

miniprogram/mathPages/countMatch/countMatch.ts

@@ -0,0 +1,292 @@
+import { PAPER_SIZE } from '../../constants/colors';
+import { checkAndSaveImage } from '../../utils/saveImage';
+import { shouldShowShareGuide } from '../../utils/shareGuide';
+import CountMatchDraw from '../service/countMatchDraw';
+import NumberColorDraw from '../service/numberColorDraw';
+import {
+    MATH_FUNCTION_TYPES,
+    MathFunctionType,
+} from '../../constants/mathFunctions';
+
+Page({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as CountMatchDraw | NumberColorDraw | null,
+    matchData: null as {
+        leftNumbers: number[];
+        rightNumbers: number[];
+    } | null,
+    colorData: null as {
+        numbers: number[];
+    } | null,
+
+    data: {
+        pageTitle: '数一数，连一连',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+        showTypeSelector: false,
+        currentType: 'twelve-animals', // 'twelve-animals' 或 'fruits' 或 'circle' 或 'caterpillar'
+        currentTypeName: '十二生肖',
+        typeActions: [
+            { name: '十二生肖', value: 'twelve-animals' },
+            { name: '水果', value: 'fruits' },
+        ],
+    },
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'counting-matching';
+        this.setData({ functionId });
+
+        const functionItem = MATH_FUNCTION_TYPES.find(
+            (item: MathFunctionType) => item.id === functionId,
+        );
+
+        const pageTitle = functionItem?.title || '数一数，连一连';
+        this.setData({ pageTitle });
+        wx.setNavigationBarTitle({ title: pageTitle });
+
+        // 根据 functionId 设置不同的类型选择器
+        if (functionId === 'number-coloring') {
+            this.setData({
+                currentType: 'caterpillar',
+                currentTypeName: '毛毛虫',
+                typeActions: [
+                    { name: '毛毛虫', value: 'caterpillar' },
+                    { name: '圆圈', value: 'circle' },
+                ],
+            });
+        }
+    },
+
+    onReady() {
+        this.initCanvas();
+    },
+
+    /**
+     * 初始化Canvas
+     */
+    initCanvas() {
+        const query = wx.createSelectorQuery();
+        query
+            .select('#canvasWrapper')
+            .boundingClientRect((rect) => {
+                if (rect) {
+                    const { width, height } = PAPER_SIZE['A4'];
+                    const boxWidth = rect.width;
+                    const boxHeight = boxWidth / (width / height);
+
+                    this.boxHeight = boxHeight;
+                    this.boxWidth = boxWidth;
+
+                    this.setData({ boxWidth, boxHeight });
+
+                    const canvas = wx
+                        .createSelectorQuery()
+                        .select('#canvasContent');
+                    canvas.fields({ node: true, size: true }).exec((res) => {
+                        if (res[0]) {
+                            const canvasNode = res[0].node;
+                            const ctx = canvasNode.getContext('2d');
+                            const dpr = wx.getSystemInfoSync().pixelRatio;
+
+                            canvasNode.width = boxWidth * dpr;
+                            canvasNode.height = boxHeight * dpr;
+                            ctx.scale(dpr, dpr);
+
+                            this.canvas = canvasNode;
+                            this.ctx = ctx;
+
+                            // 根据 functionId 创建不同的绘制服务
+                            if (this.data.functionId === 'number-coloring') {
+                                this.drawService = new NumberColorDraw(
+                                    canvasNode,
+                                    ctx,
+                                    {
+                                        title: this.data.pageTitle,
+                                        subTitle:
+                                            '根据数字给相应的圆圈涂色，巩固数字与数量的认知',
+                                    },
+                                );
+                            } else {
+                                this.drawService = new CountMatchDraw(
+                                    canvasNode,
+                                    ctx,
+                                    {
+                                        title: this.data.pageTitle,
+                                        subTitle:
+                                            '通过连线配对数字和对应的数量图形',
+                                    },
+                                );
+                            }
+
+                            // 初始随机生成
+                            this.onRandom();
+                        }
+                    });
+                }
+            })
+            .exec();
+    },
+
+    /**
+     * 绘制Canvas内容
+     */
+    async drawCanvas() {
+        if (!this.ctx || !this.drawService) {
+            return;
+        }
+
+        try {
+            if (this.data.functionId === 'number-coloring') {
+                if (!this.colorData) {
+                    return;
+                }
+                await (this.drawService as NumberColorDraw).draw(
+                    this.colorData,
+                    this.data.currentType,
+                );
+            } else {
+                if (!this.matchData) {
+                    return;
+                }
+                await (this.drawService as CountMatchDraw).draw(
+                    this.matchData,
+                    this.data.currentType,
+                );
+            }
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成
+     */
+    onRandom() {
+        if (this.data.functionId === 'number-coloring') {
+            // 按数字涂颜色模式：生成6个随机数字（1-10）
+            const availableNumbers = Array.from(
+                { length: 10 },
+                (_, i) => i + 1,
+            );
+            const numbers: number[] = [];
+
+            for (let i = 0; i < 6; i++) {
+                const randomIndex = Math.floor(
+                    Math.random() * availableNumbers.length,
+                );
+                const number = availableNumbers.splice(randomIndex, 1)[0];
+                numbers.push(number);
+            }
+
+            this.colorData = { numbers };
+        } else {
+            // 数一数连一连模式：生成5个不同的数字（1-10）
+            const availableNumbers = Array.from(
+                { length: 10 },
+                (_, i) => i + 1,
+            );
+            const leftNumbers: number[] = [];
+
+            for (let i = 0; i < 5; i++) {
+                const randomIndex = Math.floor(
+                    Math.random() * availableNumbers.length,
+                );
+                const number = availableNumbers.splice(randomIndex, 1)[0];
+                leftNumbers.push(number);
+            }
+
+            // 复制数字数组并打乱顺序，作为右侧显示的数字
+            const rightNumbers = [...leftNumbers];
+            for (let i = rightNumbers.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [rightNumbers[i], rightNumbers[j]] = [
+                    rightNumbers[j],
+                    rightNumbers[i],
+                ];
+            }
+
+            this.matchData = { leftNumbers, rightNumbers };
+        }
+
+        this.drawCanvas();
+    },
+
+    /**
+     * 导出打印
+     */
+    exportToPrint() {
+        if (!this.canvas || !this.data.hasContent) {
+            return;
+        }
+
+        if (shouldShowShareGuide()) {
+            this.setData({ showShareDialog: true });
+            return;
+        }
+
+        checkAndSaveImage(this.canvas);
+    },
+
+    /**
+     * 分享小程序
+     */
+    onShareAppMessage() {
+        return {
+            title: '涂鸦丫-数学学习涂鸦卡',
+            path: `/mathPages/countMatch/countMatch?id=${this.data.functionId}`,
+            imageUrl:
+                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
+        };
+    },
+
+    onShareTimeline() {
+        return {
+            title: '涂鸦丫-数学学习涂鸦卡',
+            query: `id=${this.data.functionId}`,
+            imageUrl:
+                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
+        };
+    },
+
+    /** 关闭分享引导弹窗 */
+    onCloseShareDialog() {
+        this.setData({ showShareDialog: false });
+    },
+
+    /** 分享成功回调 */
+    onShareSuccess() {
+        this.setData({ showShareDialog: false });
+        if (this.canvas) {
+            checkAndSaveImage(this.canvas);
+        }
+    },
+
+    /** 显示类型选择器 */
+    onShowTypeSelector() {
+        this.setData({ showTypeSelector: true });
+    },
+
+    /** 关闭类型选择器 */
+    onCloseTypeSelector() {
+        console.log('onCloseTypeSelector');
+        this.setData({ showTypeSelector: false });
+    },
+
+    /** 选择类型 */
+    onSelectType(event: any) {
+        const { name, value } = event.detail;
+        this.setData({
+            currentType: value,
+            currentTypeName: name,
+            showTypeSelector: false,
+        });
+        // 重新生成数据
+        this.onRandom();
+    },
+});

miniprogram/mathPages/countMatch/countMatch.wxml

@@ -0,0 +1,69 @@
+<view class="page-container">
+    <view class="wrapper">
+        <text class="wrapper-title">预览打印效果</text>
+
+        <!-- 预览打印效果 -->
+        <view id="canvasWrapper" class="canvas-wrapper">
+            <canvas
+                type="2d"
+                id="canvasContent"
+                class="canvas-content"
+                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+        </view>
+
+        <!-- 随机生成按钮 -->
+        <view class="random-button-area">
+            <view class="type-selector" bind:tap="onShowTypeSelector">
+                <text class="type-selector-text">{{currentTypeName}}</text>
+                <text class="type-selector-arrow">▼</text>
+            </view>
+            <toy-button
+                class="random-button"
+                type="primary"
+                bind:click="onRandom"
+                width="100%"
+                height="80rpx"
+                icon="refresh"
+                icon-class-prefix="toy-icon">
+                随机生成
+            </toy-button>
+        </view>
+        <van-action-sheet
+            show="{{showTypeSelector}}"
+            actions="{{typeActions}}"
+            bind:select="onSelectType"
+            bind:cancel="onCloseTypeSelector"
+            bind:close="onCloseTypeSelector"
+            cancel-text="取消"
+            custom-class="custom-action-sheet" />
+    </view>
+    <view class="empty"></view>
+</view>
+<view class="bottom-btn-box">
+    <toy-button
+        openType="share"
+        type="green"
+        flat="{{true}}"
+        bind:click="onShareAppMessage"
+        width="220rpx"
+        height="80rpx"
+        icon="wechat"
+        icon-class-prefix="toy-icon">
+        分享
+    </toy-button>
+    <toy-button
+        type="primary"
+        flat="{{true}}"
+        bind:click="exportToPrint"
+        width="420rpx"
+        height="80rpx"
+        disabled="{{!hasContent}}"
+        icon="download"
+        icon-class-prefix="toy-icon">
+        下载打印
+    </toy-button>
+</view>
+<share-guide-popup
+    show="{{showShareDialog}}"
+    bind:onClose="onCloseShareDialog"
+    bind:onShareSuccess="onShareSuccess" />

miniprogram/mathPages/numberFind/numberFind.ts

@@ -1,7 +1,7 @@
 import { PAPER_SIZE } from '../../constants/colors';
 import { checkAndSaveImage } from '../../utils/saveImage';
 import { shouldShowShareGuide } from '../../utils/shareGuide';
-import NumberColorDraw from '../service/numberColorDraw';
+import NumberFindDraw from '../service/numberFindDraw';
 import {
     MATH_FUNCTION_TYPES,
     MathFunctionType,
@@ -12,7 +12,7 @@ Page({
     ctx: null as RenderingContext | null,
     boxHeight: 0,
     boxWidth: 0,
-    drawService: null as NumberColorDraw | null,
+    drawService: null as NumberFindDraw | null,
 
     data: {
         pageTitle: '看数字，涂一涂', // 默认标题
@@ -89,7 +89,7 @@ Page({
                             this.ctx = ctx;
 
                             // 初始化绘制服务
-                            this.drawService = new NumberColorDraw(
+                            this.drawService = new NumberFindDraw(
                                 canvasNode,
                                 ctx,
                                 {
@@ -180,7 +180,7 @@ Page({
     onShareAppMessage() {
         return {
             title: '涂鸦丫-数学学习涂鸦卡',
-            path: `/mathPages/numberColor/numberColor?id=${this.data.functionId}`,
+            path: `/mathPages/numberFind/numberFind?id=${this.data.functionId}`,
             imageUrl:
                 'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
         };

miniprogram/mathPages/service/baseMathDraw.ts

@@ -52,9 +52,6 @@ export class BaseMathDrawService {
         const { ctx, canvas } = this;
         const { pixelRatio: dpr } = wx.getWindowInfo();
         let { width, height } = PAPER_SIZE[this.paperSize];
-        console.log('width', width);
-        console.log('height', height);
-        console.log('dpr', dpr);
 
         this.canvasWidth = width;
         this.canvasHeight = height;
@@ -87,8 +84,8 @@ export class BaseMathDrawService {
      * 绘制Header（逻辑像素，尺寸除以3）
      */
     async drawHeader() {
-        this.currentX = 24;
-        this.currentY = 24;
+        this.currentX = 25;
+        this.currentY = 25;
         await drawMathHeader({
             canvas: this.canvas,
             ctx: this.ctx,
@@ -101,6 +98,7 @@ export class BaseMathDrawService {
                     this.options.subTitle || '找一找下面相同的数字，涂上颜色',
             },
             onHeaderDrawn: (currentY) => {
+                console.log('onHeaderDrawn currentY', currentY);
                 this.currentY = currentY;
             },
         });
@@ -118,6 +116,7 @@ export class BaseMathDrawService {
                 title: this.options.title || '看数字，涂一涂',
             },
             onHeaderDrawn: (currentY) => {
+                console.log('drawMiniHeader currentY', currentY);
                 this.currentY = currentY;
             },
         });
@@ -128,7 +127,7 @@ export class BaseMathDrawService {
      */
     drawDivider() {
         const { ctx, canvasWidth } = this;
-        const dividerY = this.currentY + 10; // 10px间距
+        const dividerY = this.currentY;
 
         ctx.strokeStyle = '#000';
         ctx.lineWidth = 1;

miniprogram/mathPages/service/countMatchContentDraw.ts

@@ -0,0 +1,293 @@
+import { getImage } from '../../utils/index';
+
+interface DrawCountMatchContentParams {
+    canvas: WechatMiniprogram.Canvas;
+    ctx: RenderingContext;
+    matchData: {
+        leftNumbers: number[];
+        rightNumbers: number[]; // 打乱顺序后的数字数组
+    };
+    canvasWidth: number;
+    startY: number;
+    imageType?: string; // 'twelve-animals' 或 'fruits'
+}
+
+/**
+ * 绘制圆角矩形（虚线边框）
+ */
+function drawRoundedRect(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+    isDashed: boolean = true,
+) {
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+
+    if (isDashed) {
+        ctx.setLineDash([6 / 3, 6 / 3]); // 约2px的虚线
+    } else {
+        ctx.setLineDash([]);
+    }
+    ctx.stroke();
+    ctx.setLineDash([]); // 重置为实线
+}
+
+/**
+ * 绘制数一数连一连内容区域
+ * 左侧显示数字（虚线圆角框），右侧显示对应数量的图片（虚线圆角框）
+ * 支持根据 imageType 选择不同的图片文件夹（twelve-animals 或 fruits）
+ */
+export async function drawCountMatchContent({
+    canvas,
+    ctx,
+    matchData,
+    canvasWidth,
+    startY,
+    imageType = 'twelve-animals',
+}: DrawCountMatchContentParams): Promise<void> {
+    const { leftNumbers, rightNumbers } = matchData;
+
+    // 根据图片类型确定图片目录和最大索引
+    const imageConfig = {
+        'twelve-animals': {
+            folder: 'twelve-animals',
+            maxIndex: 12,
+        },
+        fruits: {
+            folder: 'fruits',
+            maxIndex: 22,
+        },
+    };
+
+    const config =
+        imageConfig[imageType as keyof typeof imageConfig] ||
+        imageConfig['twelve-animals'];
+    const leftMargin = 24;
+    const rightMargin = 24;
+    const itemSpacing = 140;
+    const LeftBoxWidth = 120;
+    const rightBoxWidth = 250;
+    const boxHeight = 110;
+    const borderRadius = 12;
+    const imageSpacing = 5; // 图片之间的水平间距（同一行内）
+    const rowSpacing = 10; // 行之间的垂直间距（两行之间）
+    const imagesPerRow = 5; // 每行最多5张图片
+    const maxImages = 10; // 最多10张图片
+    const padding = 10; // 框内边距
+    const startYPos = startY + 20;
+    const linePointRadius = 8;
+    const linePointSpacing = 12;
+
+    /**
+     * 根据图片数量动态计算图片宽度
+     * @param count 图片数量
+     * @returns 图片宽度
+     */
+    const getImageWidth = (count: number): number => {
+        if (count <= 2) {
+            return 90;
+        } else if (count <= 3) {
+            return 70;
+        } else if (count <= 4) {
+            return 55;
+        } else {
+            return 40;
+        }
+    };
+
+    // 计算左侧和右侧的起始X位置
+    const leftBoxX = leftMargin;
+    const rightBoxX = canvasWidth - rightMargin - rightBoxWidth;
+
+    // 绘制左侧数字框
+    for (let i = 0; i < leftNumbers.length; i++) {
+        const boxY = startYPos + i * itemSpacing;
+        const number = leftNumbers[i];
+
+        // 绘制虚线圆角矩形框
+        ctx.strokeStyle = '#999';
+        ctx.lineWidth = 1;
+        drawRoundedRect(
+            ctx,
+            leftBoxX,
+            boxY,
+            LeftBoxWidth,
+            boxHeight,
+            borderRadius,
+            true,
+        );
+
+        // 绘制数字
+        ctx.fillStyle = '#000';
+        ctx.font = `bold ${56}px "Microsoft Yahei"`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(
+            String(number),
+            leftBoxX + LeftBoxWidth / 2,
+            boxY + boxHeight / 2,
+        );
+
+        // 绘制左侧框右侧的连线圆点（直径14，半径7）
+        const leftCircleX =
+            leftBoxX + LeftBoxWidth + linePointSpacing + linePointRadius;
+        const leftCircleY = boxY + boxHeight / 2;
+        ctx.fillStyle = '#93D333';
+        ctx.beginPath();
+        ctx.arc(leftCircleX, leftCircleY, linePointRadius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+
+    // 为每个框生成唯一的图片索引，确保不同框使用不同的图片
+    const availableImageIndices = Array.from(
+        { length: config.maxIndex },
+        (_, i) => i + 1,
+    );
+    const boxImageIndices: number[] = [];
+    for (let i = 0; i < rightNumbers.length; i++) {
+        const randomIndex = Math.floor(
+            Math.random() * availableImageIndices.length,
+        );
+        const imageIndex = availableImageIndices.splice(randomIndex, 1)[0];
+        boxImageIndices.push(imageIndex);
+    }
+
+    // 绘制右侧图片框
+    for (let i = 0; i < rightNumbers.length; i++) {
+        const boxY = startYPos + i * itemSpacing;
+        const number = rightNumbers[i]; // 这个数字决定了要绘制多少张图片
+        const boxImageIndex = boxImageIndices[i]; // 这个框使用的图片索引（所有图片都一样）
+
+        // 绘制虚线圆角矩形框
+        ctx.strokeStyle = '#999';
+        ctx.lineWidth = 1;
+        drawRoundedRect(
+            ctx,
+            rightBoxX,
+            boxY,
+            rightBoxWidth,
+            boxHeight,
+            borderRadius,
+            true,
+        );
+
+        // 计算要绘制的图片数量（最多10张）
+        const imageCount = Math.min(number, maxImages);
+
+        // 根据图片数量动态计算图片宽度
+        const imageWidth = getImageWidth(imageCount);
+
+        // 加载当前框使用的图片（只加载一次，用于计算高度和绘制）
+        let boxImage: any = null;
+        try {
+            const imagePath = `/mathPages/assets/${config.folder}/${boxImageIndex}.png`;
+            boxImage = await getImage(canvas, imagePath);
+        } catch (error) {
+            console.error(
+                `加载${config.folder}/${boxImageIndex}图片失败:`,
+                error,
+            );
+        }
+
+        // 计算图片高度（等比例缩放）
+        let imageHeight = imageWidth; // 默认高度
+        if (boxImage) {
+            // @ts-ignore - 微信小程序图片对象有 width 和 height 属性
+            imageHeight = (boxImage.height / boxImage.width) * imageWidth;
+        }
+
+        // 计算每行的图片数量
+        const imagesInFirstRow = Math.min(imageCount, imagesPerRow);
+        const imagesInSecondRow =
+            imageCount > imagesPerRow ? imageCount - imagesPerRow : 0;
+
+        // 计算图片的总高度（考虑行数）
+        const rowCount = imagesInSecondRow > 0 ? 2 : 1;
+
+        const totalImageHeight =
+            rowCount * imageHeight + (rowCount - 1) * rowSpacing;
+        // 垂直居中：框顶部 + 内边距 + (框高度 - 上下内边距 - 图片总高度) / 2
+        const startImageY =
+            boxY + padding + (boxHeight - padding * 2 - totalImageHeight) / 2;
+
+        // 计算每行的起始X位置（用于居中）
+        const firstRowImageCount = imagesInFirstRow;
+        const firstRowWidth =
+            firstRowImageCount * imageWidth +
+            (firstRowImageCount - 1) * imageSpacing;
+        const firstRowStartX =
+            rightBoxX +
+            padding +
+            (rightBoxWidth - padding * 2 - firstRowWidth) / 2;
+
+        const secondRowImageCount = imagesInSecondRow;
+        const secondRowWidth =
+            secondRowImageCount * imageWidth +
+            (secondRowImageCount - 1) * imageSpacing;
+        const secondRowStartX =
+            rightBoxX +
+            padding +
+            (rightBoxWidth - padding * 2 - secondRowWidth) / 2;
+
+        // 绘制图片（同一个框内使用同一张图片）
+        for (let imgIndex = 0; imgIndex < imageCount; imgIndex++) {
+            const row = Math.floor(imgIndex / imagesPerRow);
+            const col = imgIndex % imagesPerRow;
+
+            // 计算图片的X位置（根据行数选择不同的起始位置）
+            const rowStartX = row === 0 ? firstRowStartX : secondRowStartX;
+            const imageX = rowStartX + col * (imageWidth + imageSpacing);
+
+            // 计算图片的Y位置
+            const imageY = startImageY + row * (imageHeight + rowSpacing);
+
+            if (boxImage) {
+                // 计算图片高度（等比例缩放）
+                // @ts-ignore - 微信小程序图片对象有 width 和 height 属性
+                const scaledHeight =
+                    (boxImage.height / boxImage.width) * imageWidth;
+
+                ctx.drawImage(
+                    boxImage,
+                    imageX,
+                    imageY,
+                    imageWidth,
+                    scaledHeight,
+                );
+            } else {
+                // 如果图片加载失败，绘制一个小圆点作为备用
+                ctx.fillStyle = '#ccc';
+                ctx.beginPath();
+                ctx.arc(
+                    imageX + imageWidth / 2,
+                    imageY + imageHeight / 2,
+                    imageWidth / 4,
+                    0,
+                    Math.PI * 2,
+                );
+                ctx.fill();
+            }
+        }
+
+        // 绘制右侧框左侧的连线圆点（直径14，半径7）
+        const rightCircleX = rightBoxX - linePointSpacing - linePointRadius; // 间距15 + 半径linePointRadius
+        const rightCircleY = boxY + boxHeight / 2;
+        ctx.fillStyle = '#93D333';
+        ctx.beginPath();
+        ctx.arc(rightCircleX, rightCircleY, linePointRadius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}

miniprogram/mathPages/service/countMatchDraw.ts

@@ -0,0 +1,56 @@
+import { BaseMathDrawService } from './baseMathDraw';
+import { drawCountMatchContent } from './countMatchContentDraw';
+
+/**
+ * 数一数连一连绘制服务
+ * 组合使用基础绘制服务和内容区域绘制服务
+ */
+class CountMatchDraw extends BaseMathDrawService {
+    matchData: {
+        leftNumbers: number[];
+        rightNumbers: number[]; // 打乱顺序后的数字数组
+    } | null;
+
+    constructor(
+        canvas: Canvas,
+        ctx: RenderingContext,
+        options?: Record<string, any>,
+    ) {
+        super(canvas, ctx, options);
+        this.matchData = null;
+    }
+
+    async draw(
+        matchData: { leftNumbers: number[]; rightNumbers: number[] },
+        imageType: string = 'twelve-animals',
+    ) {
+        if (!matchData || !matchData.leftNumbers || !matchData.rightNumbers) {
+            return;
+        }
+
+        this.setPrintConfig();
+        this.matchData = matchData;
+        this.clear();
+        this.setPaper();
+
+        // 绘制Header
+        if (this.headerType !== 'minimal') {
+            await this.drawHeader();
+        } else {
+            this.drawMiniHeader();
+        }
+
+        // 绘制内容区域（数一数连一连）
+        this.drawDivider();
+        await drawCountMatchContent({
+            canvas: this.canvas,
+            ctx: this.ctx,
+            matchData: this.matchData,
+            canvasWidth: this.canvasWidth,
+            startY: this.currentY,
+            imageType,
+        });
+    }
+}
+
+export default CountMatchDraw;

miniprogram/mathPages/service/mathHeaderDraw.ts

@@ -29,7 +29,7 @@ export async function drawMathHeader({
     const { appName, appHint, title, subTitle } = options;
 
     let titleX = 108; // 约109.33
-    const titleY = 26; // 约26.67
+    const titleY = 25; // 约26.67
 
     const logoX = 24; // 约26.67
     const logoY = 20; // 20
@@ -85,7 +85,7 @@ export async function drawMathHeader({
 
     // 调用回调函数
     if (onHeaderDrawn) {
-        onHeaderDrawn(100);
+        onHeaderDrawn(110);
     }
 }
 
@@ -124,6 +124,6 @@ export function drawMathMiniHeader({
 
     // 调用回调函数，传递除以3后的currentY
     if (onHeaderDrawn) {
-        onHeaderDrawn(64); // 约66.67
+        onHeaderDrawn(66); // 约66.67
     }
 }

miniprogram/mathPages/service/numberColorContentDraw.ts

@@ -0,0 +1,476 @@
+/**
+ * 数字颜色映射（使用基础12色）
+ * 由于只有10个数字，使用全部12种颜色中的11种（跳过黑色，因为黑色不适合作为数字颜色）
+ */
+const NUMBER_COLORS: Record<number, string> = {
+    1: '#ED6D50', // 柔和红色
+    2: '#F9A857', // 柔和橙色
+    3: '#FFE176', // 柔和黄色
+    4: '#B2D94B', // 柔和黄绿色
+    5: '#53D1B6', // 柔和绿色
+    6: '#6CD2EA', // 柔和青色
+    7: '#79A7ED', // 柔和蓝色
+    8: '#9C98DE', // 柔和紫色
+    9: '#F2A4C0', // 柔和粉色
+    10: '#FC9B6C', // 柔和橙红色
+    11: '#BC8F71', // 柔和棕色
+    12: '#666666', // 柔和黑灰
+};
+
+interface DrawNumberColorContentParams {
+    canvas: WechatMiniprogram.Canvas;
+    ctx: RenderingContext;
+    colorData: {
+        numbers: number[];
+    };
+    canvasWidth: number;
+    startY: number;
+    patternType?: string; // 'circle' 或 'caterpillar'
+}
+
+/**
+ * 绘制圆角矩形（虚线边框）
+ */
+function drawRoundedRect(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+    isDashed: boolean = true,
+) {
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+
+    if (isDashed) {
+        ctx.setLineDash([6, 6]); // 虚线
+    } else {
+        ctx.setLineDash([]);
+    }
+    ctx.stroke();
+    ctx.setLineDash([]); // 重置为实线
+}
+
+/**
+ * 绘制毛毛虫头部
+ */
+function drawCaterpillarHead(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    size: number,
+    color: string,
+) {
+    const headRadius = 18; // 固定头部半径
+    const headCenterX = x + headRadius;
+    const headCenterY = y + size / 2;
+
+    // 绘制头部（圆形）
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(headCenterX, headCenterY, headRadius, 0, Math.PI * 2);
+    ctx.fill();
+
+    // 绘制头部圆圈实线边框
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([]); // 确保是实线
+    ctx.beginPath();
+    ctx.arc(headCenterX, headCenterY, headRadius, 0, Math.PI * 2);
+    ctx.stroke();
+
+    // 绘制触角（在头部圆圈的正上方，带弧度的弯曲）
+    const antennaLength = headRadius * 0.6;
+    const antennaStartY = headCenterY - headRadius; // 头部圆圈的正上方
+    const antennaOffset = headRadius * 0.3; // 触角左右偏移距离
+
+    // 左侧触角：从顶部左侧开始，先向上，然后向左弯曲（带弧度）
+    const leftAntennaStartX = headCenterX - antennaOffset;
+    const leftAntennaStartY = antennaStartY;
+    const leftAntennaMidY = leftAntennaStartY - antennaLength * 0.5; // 向上延伸的中点
+    const leftAntennaEndX = leftAntennaStartX - antennaLength * 0.4; // 向左弯曲
+    const leftAntennaEndY = leftAntennaMidY - antennaLength * 0.3; // 向上并向左
+
+    // 右侧触角：从顶部右侧开始，先向上，然后向右弯曲（带弧度）
+    const rightAntennaStartX = headCenterX + antennaOffset;
+    const rightAntennaStartY = antennaStartY;
+    const rightAntennaMidY = rightAntennaStartY - antennaLength * 0.5; // 向上延伸的中点
+    const rightAntennaEndX = rightAntennaStartX + antennaLength * 0.4; // 向右弯曲
+    const rightAntennaEndY = rightAntennaMidY - antennaLength * 0.3; // 向上并向右
+
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 1.5;
+    ctx.lineCap = 'round'; // 圆角端点
+
+    // 绘制左侧触角（使用二次贝塞尔曲线实现平滑弧度）
+    ctx.beginPath();
+    ctx.moveTo(leftAntennaStartX, leftAntennaStartY);
+    // 使用二次贝塞尔曲线：起点、控制点、终点
+    // 控制点在中间位置，使曲线平滑向左弯曲
+    const leftControlX = leftAntennaStartX - antennaLength * 0.2;
+    const leftControlY = leftAntennaMidY;
+    ctx.quadraticCurveTo(
+        leftControlX,
+        leftControlY,
+        leftAntennaEndX,
+        leftAntennaEndY,
+    );
+    ctx.stroke();
+
+    // 绘制右侧触角（使用二次贝塞尔曲线实现平滑弧度）
+    ctx.beginPath();
+    ctx.moveTo(rightAntennaStartX, rightAntennaStartY);
+    // 使用二次贝塞尔曲线：起点、控制点、终点
+    // 控制点在中间位置，使曲线平滑向右弯曲
+    const rightControlX = rightAntennaStartX + antennaLength * 0.2;
+    const rightControlY = rightAntennaMidY;
+    ctx.quadraticCurveTo(
+        rightControlX,
+        rightControlY,
+        rightAntennaEndX,
+        rightAntennaEndY,
+    );
+    ctx.stroke();
+
+    // 绘制触角末端的小圆点
+    ctx.fillStyle = '#000';
+    ctx.beginPath();
+    ctx.arc(leftAntennaEndX, leftAntennaEndY, 2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(rightAntennaEndX, rightAntennaEndY, 2, 0, Math.PI * 2);
+    ctx.fill();
+
+    // 绘制眼睛
+    const eyeSize = headRadius * 0.15;
+    const eyeOffsetX = headRadius * 0.25;
+    const eyeOffsetY = headRadius * 0.22;
+    ctx.fillStyle = '#fff';
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX - eyeOffsetX - 2,
+        headCenterY - eyeOffsetY,
+        eyeSize,
+        0,
+        Math.PI * 2,
+    );
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX + eyeOffsetX - 2,
+        headCenterY - eyeOffsetY,
+        eyeSize,
+        0,
+        Math.PI * 2,
+    );
+    ctx.fill();
+
+    // 绘制眼珠
+    ctx.fillStyle = '#000';
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX - eyeOffsetX - 2,
+        headCenterY - eyeOffsetY,
+        eyeSize * 0.6,
+        0,
+        Math.PI * 2,
+    );
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX + eyeOffsetX - 2,
+        headCenterY - eyeOffsetY,
+        eyeSize * 0.6,
+        0,
+        Math.PI * 2,
+    );
+    ctx.fill();
+
+    // 绘制嘴巴（微笑）
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX - 2,
+        headCenterY + headRadius * 0.22,
+        headRadius * 0.3,
+        0,
+        Math.PI,
+    );
+    ctx.stroke();
+}
+
+/**
+ * 绘制毛毛虫身体（带弧度的圆圈）
+ */
+function drawCaterpillarBody(
+    ctx: RenderingContext,
+    startX: number,
+    startY: number,
+    count: number,
+    bodyRadius: number,
+    color: string,
+) {
+    const spacing = bodyRadius * 2; // 身体圆圈之间的间距（稍微重叠）
+    const waveAmplitude = bodyRadius * 0.4; // 波浪幅度
+
+    for (let i = 0; i < count; i++) {
+        // 计算每个身体圆圈的位置（带弧度，形成弯曲效果）
+        const baseX = startX + i * spacing;
+        // 使用正弦函数创建波浪效果，使身体有弧度
+        const waveOffset = Math.sin((i * Math.PI) / 2.5) * waveAmplitude;
+        const bodyX = baseX;
+        const bodyY = startY + waveOffset;
+
+        // 绘制身体圆圈
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(bodyX, bodyY, bodyRadius, 0, Math.PI * 2);
+        ctx.fill();
+
+        // 绘制边框（可选，根据设计需求）
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+    }
+}
+
+/**
+ * 绘制圆圈模式的内容
+ */
+function drawCirclePattern(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    number: number,
+    numberColor: string,
+    isFirstRow: boolean,
+) {
+    const totalCircles = 10;
+    const circleRadius = 16; // 固定半径
+    const circleSpacing = 6; // 固定间距
+
+    // 计算所有圆圈的总宽度
+    const totalWidth =
+        totalCircles * circleRadius * 2 + (totalCircles - 1) * circleSpacing;
+
+    // 计算水平居中位置
+    const startX = x + (width - totalWidth) / 2 + circleRadius;
+
+    // 计算垂直居中位置
+    const centerY = y + height / 2;
+
+    // 绘制10个虚线圆圈（一行）
+    for (let i = 0; i < totalCircles; i++) {
+        const circleX = startX + i * (circleRadius * 2 + circleSpacing);
+
+        // 绘制虚线圆圈
+        ctx.strokeStyle = numberColor;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([3, 3]);
+        ctx.beginPath();
+        ctx.arc(circleX, centerY, circleRadius, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.setLineDash([]);
+
+        // 第一行：根据数字数量涂色
+        if (isFirstRow && i < number) {
+            ctx.fillStyle = numberColor;
+            ctx.beginPath();
+            ctx.arc(circleX, centerY, circleRadius - 1, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    }
+}
+
+/**
+ * 绘制毛毛虫模式的内容
+ */
+function drawCaterpillarPattern(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    number: number,
+    numberColor: string,
+    isFirstRow: boolean,
+) {
+    const padding = 15;
+    const headSize = 45; // 头部区域高度（用于垂直居中）
+    const headRadius = 18; // 固定头部半径
+    const bodyRadius = 16; // 固定身体半径
+
+    if (isFirstRow) {
+        // 第一行：绘制完整的毛毛虫（头部+身体）
+        const headX = x + padding;
+        const headY = y + (height - headSize) / 2;
+
+        // 绘制头部
+        drawCaterpillarHead(ctx, headX, headY, headSize, numberColor);
+
+        // 计算头部的实际宽度（头部半径 * 2）
+        const headWidth = headRadius * 2; // 头部的实际宽度 = 36
+
+        // 绘制身体（从头部右侧边缘开始，留一点间距）
+        const bodyStartX = headX + headWidth + 17; // 头部右边缘 + 5px间距
+        const bodyStartY = headY + headSize / 2; // 与头部中心Y对齐
+        drawCaterpillarBody(
+            ctx,
+            bodyStartX,
+            bodyStartY,
+            number,
+            bodyRadius,
+            numberColor,
+        );
+    } else {
+        // 其他行：只绘制头部
+        const headX = x + padding;
+        const headY = y + (height - headSize) / 2;
+        drawCaterpillarHead(ctx, headX, headY, headSize, numberColor);
+    }
+}
+
+/**
+ * 绘制按数字涂颜色内容区域
+ */
+export async function drawNumberColorContent({
+    canvas,
+    ctx,
+    colorData,
+    canvasWidth,
+    startY,
+    patternType = 'circle',
+}: DrawNumberColorContentParams): Promise<void> {
+    const { numbers } = colorData;
+
+    const leftMargin = 24;
+    const rightMargin = 24;
+    const itemSpacing = 115; // 行间距
+    const leftBoxWidth = 100;
+    const rightBoxWidth = 420;
+    const boxHeight = 80;
+    const borderRadius = 12;
+    const startYPos = startY + 20;
+
+    // 获取所有可用颜色值
+    const availableColors = Object.values(NUMBER_COLORS);
+
+    // 为每一行随机分配颜色，确保不重复
+    const shuffledColors = [...availableColors];
+    // Fisher-Yates 洗牌算法
+    for (let i = shuffledColors.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffledColors[i], shuffledColors[j]] = [
+            shuffledColors[j],
+            shuffledColors[i],
+        ];
+    }
+
+    // 为每一行分配颜色（确保不重复）
+    // 如果行数超过颜色数量，从剩余颜色中随机选择，但确保相邻行不同
+    const rowColors: string[] = [];
+
+    for (let i = 0; i < numbers.length; i++) {
+        if (i < shuffledColors.length) {
+            // 前 N 行（N <= 颜色数量）使用不同的颜色
+            rowColors.push(shuffledColors[i]);
+        } else {
+            // 如果行数超过颜色数量，从剩余颜色中选择（确保与上一行不同）
+            const remainingColors = shuffledColors.filter(
+                (color) => color !== rowColors[i - 1],
+            );
+            const randomColor =
+                remainingColors[
+                    Math.floor(Math.random() * remainingColors.length)
+                ];
+            rowColors.push(randomColor);
+        }
+    }
+
+    // 计算左侧和右侧的起始X位置
+    const leftBoxX = leftMargin;
+    const rightBoxX = canvasWidth - rightMargin - rightBoxWidth;
+
+    // 绘制每一行
+    for (let i = 0; i < numbers.length; i++) {
+        const boxY = startYPos + i * itemSpacing;
+        const number = numbers[i];
+        const numberColor = rowColors[i]; // 使用随机分配的颜色
+        const isFirstRow = i === 0;
+
+        // 绘制左侧数字框（虚线）
+        ctx.strokeStyle = '#999';
+        ctx.lineWidth = 1;
+        drawRoundedRect(
+            ctx,
+            leftBoxX,
+            boxY,
+            leftBoxWidth,
+            boxHeight,
+            borderRadius,
+            true,
+        );
+
+        // 绘制数字（带颜色）
+        ctx.fillStyle = numberColor;
+        ctx.font = `bold ${56}px "Microsoft Yahei"`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(
+            String(number),
+            leftBoxX + leftBoxWidth / 2,
+            boxY + boxHeight / 2,
+        );
+
+        // 绘制右侧内容框（虚线）
+        ctx.strokeStyle = '#999';
+        ctx.lineWidth = 1;
+        drawRoundedRect(
+            ctx,
+            rightBoxX,
+            boxY,
+            rightBoxWidth,
+            boxHeight,
+            borderRadius,
+            true,
+        );
+
+        // 根据模式绘制右侧内容
+        if (patternType === 'circle') {
+            drawCirclePattern(
+                ctx,
+                rightBoxX,
+                boxY,
+                rightBoxWidth,
+                boxHeight,
+                number,
+                numberColor,
+                isFirstRow,
+            );
+        } else if (patternType === 'caterpillar') {
+            drawCaterpillarPattern(
+                ctx,
+                rightBoxX,
+                boxY,
+                rightBoxWidth,
+                boxHeight,
+                number,
+                numberColor,
+                isFirstRow,
+            );
+        }
+    }
+}

miniprogram/mathPages/service/numberColorDraw.ts

@@ -1,15 +1,14 @@
 import { BaseMathDrawService } from './baseMathDraw';
-import { drawNumberPreview } from './numberPreviewDraw';
-import { drawNumberContent } from './numberContentDraw';
-import { drawNumberWriteContent } from './numberWriteDraw';
+import { drawNumberColorContent } from './numberColorContentDraw';
 
 /**
- * 数字涂色绘制服务
- * 组合使用基础绘制服务、预览区域绘制服务和内容区域绘制服务
+ * 按数字涂颜色绘制服务
+ * 组合使用基础绘制服务和内容区域绘制服务
  */
 class NumberColorDraw extends BaseMathDrawService {
-    selectedNumber: number;
-    functionId: string; // 功能ID，用于判断绘制类型
+    colorData: {
+        numbers: number[];
+    } | null;
 
     constructor(
         canvas: Canvas,
@@ -17,17 +16,19 @@ class NumberColorDraw extends BaseMathDrawService {
         options?: Record<string, any>,
     ) {
         super(canvas, ctx, options);
-        this.selectedNumber = 0;
-        this.functionId = options?.functionId || 'number-find';
+        this.colorData = null;
     }
 
-    async draw(selectedNumber: number) {
-        if (selectedNumber <= 0 || selectedNumber > 10) {
+    async draw(
+        colorData: { numbers: number[] },
+        patternType: string = 'circle', // 'circle' 或 'caterpillar'
+    ) {
+        if (!colorData || !colorData.numbers) {
             return;
         }
 
         this.setPrintConfig();
-        this.selectedNumber = selectedNumber;
+        this.colorData = colorData;
         this.clear();
         this.setPaper();
 
@@ -38,38 +39,16 @@ class NumberColorDraw extends BaseMathDrawService {
             this.drawMiniHeader();
         }
 
-        // 绘制预览区域
+        // 绘制内容区域（按数字涂颜色）
         this.drawDivider();
-        await drawNumberPreview({
+        await drawNumberColorContent({
             canvas: this.canvas,
             ctx: this.ctx,
-            selectedNumber: this.selectedNumber,
+            colorData: this.colorData,
             canvasWidth: this.canvasWidth,
             startY: this.currentY,
-            onDrawn: (currentY) => {
-                this.currentY = currentY;
-            },
+            patternType,
         });
-
-        // 绘制内容区域（根据 functionId 选择不同的绘制方法）
-        this.drawDivider();
-        if (this.functionId === 'number-write') {
-            // 书写类型：绘制书写行
-            drawNumberWriteContent({
-                ctx: this.ctx,
-                selectedNumber: this.selectedNumber,
-                canvasWidth: this.canvasWidth,
-                startY: this.currentY,
-            });
-        } else {
-            // 默认类型（number-find）：绘制数字涂色内容
-            drawNumberContent({
-                ctx: this.ctx,
-                selectedNumber: this.selectedNumber,
-                canvasWidth: this.canvasWidth,
-                startY: this.currentY,
-            });
-        }
     }
 }
 

miniprogram/mathPages/service/numberFindDraw.ts

@@ -0,0 +1,76 @@
+import { BaseMathDrawService } from './baseMathDraw';
+import { drawNumberPreview } from './numberPreviewDraw';
+import { drawNumberContent } from './numberContentDraw';
+import { drawNumberWriteContent } from './numberWriteDraw';
+
+/**
+ * 数字涂色绘制服务
+ * 组合使用基础绘制服务、预览区域绘制服务和内容区域绘制服务
+ */
+class NumberFindDraw extends BaseMathDrawService {
+    selectedNumber: number;
+    functionId: string; // 功能ID，用于判断绘制类型
+
+    constructor(
+        canvas: Canvas,
+        ctx: RenderingContext,
+        options?: Record<string, any>,
+    ) {
+        super(canvas, ctx, options);
+        this.selectedNumber = 0;
+        this.functionId = options?.functionId || 'number-find';
+    }
+
+    async draw(selectedNumber: number) {
+        if (selectedNumber <= 0 || selectedNumber > 10) {
+            return;
+        }
+
+        this.setPrintConfig();
+        this.selectedNumber = selectedNumber;
+        this.clear();
+        this.setPaper();
+
+        // 绘制Header
+        if (this.headerType !== 'minimal') {
+            await this.drawHeader();
+        } else {
+            this.drawMiniHeader();
+        }
+
+        // 绘制预览区域
+        this.drawDivider();
+        await drawNumberPreview({
+            canvas: this.canvas,
+            ctx: this.ctx,
+            selectedNumber: this.selectedNumber,
+            canvasWidth: this.canvasWidth,
+            startY: this.currentY,
+            onDrawn: (currentY) => {
+                this.currentY = currentY;
+            },
+        });
+
+        // 绘制内容区域（根据 functionId 选择不同的绘制方法）
+        this.drawDivider();
+        if (this.functionId === 'number-write') {
+            // 书写类型：绘制书写行
+            drawNumberWriteContent({
+                ctx: this.ctx,
+                selectedNumber: this.selectedNumber,
+                canvasWidth: this.canvasWidth,
+                startY: this.currentY,
+            });
+        } else {
+            // 默认类型（number-find）：绘制数字涂色内容
+            drawNumberContent({
+                ctx: this.ctx,
+                selectedNumber: this.selectedNumber,
+                canvasWidth: this.canvasWidth,
+                startY: this.currentY,
+            });
+        }
+    }
+}
+
+export default NumberFindDraw;