feat:添加按数字涂颜色

2025-12-02 11:34:08 +08:00
parent 698109e6f5
commit 425eccea21
52 changed files with 1446 additions and 65 deletions
@@ -0,0 +1,211 @@
+import { PAPER_SIZE } from '../../constants/colors';
+import { checkAndSaveImage } from '../../utils/saveImage';
+import { shouldShowShareGuide } from '../../utils/shareGuide';
+import NumberFindDraw from '../service/numberFindDraw';
+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 NumberFindDraw | null,
+
+    data: {
+        pageTitle: '看数字，涂一涂', // 默认标题
+        selectedNumber: 0, // 选中的数字
+        functionId: '', // 功能ID，用于判断标题
+        numberList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 数字列表
+        showShareDialog: false, // 显示分享引导弹窗
+    },
+
+    onLoad(options: { id?: string }) {
+        // 根据id参数判断页面标题
+        const functionId = options.id || 'number-find';
+        this.setData({
+            functionId,
+        });
+
+        // 根据functionId设置页面标题
+        const functionItem = MATH_FUNCTION_TYPES.find(
+            (item: MathFunctionType) => item.id === functionId,
+        );
+
+        const pageTitle = functionItem?.title || '看数字，涂一涂';
+        this.setData({
+            pageTitle,
+        });
+
+        // 设置导航栏标题
+        wx.setNavigationBarTitle({
+            title: pageTitle,
+        });
+    },
+
+    onReady() {
+        // 初始化canvas
+        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,
+                    });
+
+                    // 初始化canvas上下文
+                    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;
+
+                            // 初始化绘制服务
+                            this.drawService = new NumberFindDraw(
+                                canvasNode,
+                                ctx,
+                                {
+                                    title: this.data.pageTitle,
+                                    subTitle: '找一找下面相同的数字，涂上颜色',
+                                    functionId: this.data.functionId,
+                                },
+                            );
+
+                            // 如果还没有选中数字，随机选择一个
+                            if (this.data.selectedNumber === 0) {
+                                const randomNumber =
+                                    Math.floor(Math.random() * 10) + 1;
+                                this.setData({
+                                    selectedNumber: randomNumber,
+                                });
+                            }
+
+                            // 绘制初始内容
+                            this.drawCanvas();
+                        }
+                    });
+                }
+            })
+            .exec();
+    },
+
+    /**
+     * 绘制Canvas内容
+     */
+    async drawCanvas() {
+        if (!this.ctx || !this.drawService) {
+            return;
+        }
+
+        if (this.data.selectedNumber > 0) {
+            try {
+                await this.drawService.draw(this.data.selectedNumber);
+            } catch (error) {
+                console.error('绘制失败:', error);
+            }
+        }
+    },
+
+    /**
+     * 选择数字
+     */
+    onSelectNumber(e: WechatMiniprogram.TouchEvent) {
+        const number = parseInt(e.currentTarget.dataset.number);
+        this.setData({
+            selectedNumber: number,
+        });
+        this.drawCanvas();
+    },
+
+    /**
+     * 随机选择数字
+     */
+    onRandom() {
+        const randomNumber = Math.floor(Math.random() * 10) + 1;
+        this.setData({
+            selectedNumber: randomNumber,
+        });
+        this.drawCanvas();
+    },
+
+    /**
+     * 导出打印
+     */
+    exportToPrint() {
+        if (!this.canvas || this.data.selectedNumber <= 0) {
+            return;
+        }
+
+        // 检查是否需要显示分享引导
+        if (shouldShowShareGuide()) {
+            this.setData({ showShareDialog: true });
+            return;
+        }
+
+        // 直接下载
+        checkAndSaveImage(this.canvas);
+    },
+
+    /**
+     * 分享小程序
+     */
+    onShareAppMessage() {
+        return {
+            title: '涂鸦丫-数学学习涂鸦卡',
+            path: `/mathPages/numberFind/numberFind?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);
+        }
+    },
+});