doodle-mini/miniprogram/mathPages/numberFind/numberFind.ts

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);
        }
    },
});