feat:2.5.1增加方位涂涂乐功能

2025-12-16 11:01:10 +08:00
parent b5530aa7c7
commit d1a41602a7
10 changed files with 439 additions and 2 deletions
@@ -24,7 +24,11 @@
        {
            "root": "focusPages",
            "name": "focusPages",
-            "pages": ["gridDrawing/gridDrawing", "shape/shape"],
+            "pages": [
+                "gridDrawing/gridDrawing",
+                "shape/shape",
+                "positionColoring/positionColoring"
+            ],
            "independent": false
        }
    ],
@@ -25,6 +25,8 @@ App<IAppOption>({
        if (env !== 'release') {
            const printConfig =
                wx.getStorageSync('printConfig') || defaultPrintConfig;
+            // 开发环境，设置为 LogoImage
+            printConfig.header = 'LogoImage';
            this.globalData.printConfig = printConfig;
        }
    },
@@ -7,7 +7,8 @@
 // };

 export const defaultPrintConfig: PrintConfig = {
-    header: 'LogoImage',
+    // header: 'LogoImage',
+    header: 'wechat',
    appName: '涂鸦丫小程序',
    appHint: '数学|专注|练字|涂鸦',
 };
@@ -16,6 +16,14 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
        desc: '识别形状，涂一涂',
        icon: '🔍',
    },
+    // 方位涂涂乐
+    {
+        id: 'position-coloring',
+        page: 'positionColoring',
+        title: '方位涂涂乐',
+        desc: '观察卡片位置，在对应的方格中涂上颜色',
+        icon: '📍',
+    },
    // 格子仿画
    {
        id: 'grid-drawing-3x3',
@@ -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",
+        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
+    }
+}
@@ -0,0 +1,112 @@
+import PositionColoringDraw from '../shared/service/positionColoringDraw';
+import { createFocusPage } from '../shared/common/focusPageMixin';
+import { PositionColoringData } from '../shared/service/positionColoringDraw';
+
+createFocusPage({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as PositionColoringDraw | null,
+    gridData: null as PositionColoringData | null,
+
+    data: {
+        pageTitle: '方位涂涂乐',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+    },
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'position-coloring';
+        this.setData({
+            functionId,
+        });
+        this.initPageInfo(functionId, '方位涂涂乐');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => {
+                return new PositionColoringDraw(canvas, ctx, options);
+            },
+            drawServiceOptions: {
+                title: this.data.pageTitle,
+                subTitle: '观察卡片位置，在对应的方格中涂上颜色',
+                functionId: this.data.functionId,
+            },
+            onCanvasReady: () => {
+                // 初始随机生成
+                this.onRandom();
+            },
+        });
+    },
+
+    /**
+     * 绘制Canvas内容
+     */
+    async drawCanvas() {
+        if (!this.ctx || !this.drawService || !this.gridData) {
+            return;
+        }
+
+        try {
+            await this.drawService.draw(this.gridData);
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成
+     */
+    onRandom() {
+        // 生成9张不重复的图片索引（1-33）,33 是图片总数
+        const allImageIndices = Array.from({ length: 33 }, (_, i) => i + 1);
+        const shuffled = [...allImageIndices].sort(() => Math.random() - 0.5);
+        const selectedImages = shuffled.slice(0, 9);
+
+        // 创建3x3网格的图片位置映射
+        const referenceGrid: number[] = [];
+        for (let i = 0; i < 9; i++) {
+            referenceGrid[i] = selectedImages[i];
+        }
+
+        // 创建任务组：9个任务，每个任务包含一个图片和对应的位置
+        // 第一行需要标记位置（涂色），其他行不标记
+        const tasks: Array<{
+            imageIndex: number;
+            position: { x: number; y: number };
+        }> = [];
+
+        // 打乱顺序选择图片用于任务
+        const taskImageIndices = [...selectedImages].sort(
+            () => Math.random() - 0.5,
+        );
+
+        for (let i = 0; i < 9; i++) {
+            const imageIndex = taskImageIndices[i];
+            // 找到这个图片在参考网格中的位置
+            const gridIndex = referenceGrid.indexOf(imageIndex);
+            const x = gridIndex % 3;
+            const y = Math.floor(gridIndex / 3);
+            tasks.push({
+                imageIndex,
+                position: { x, y },
+            });
+        }
+
+        this.gridData = {
+            referenceGrid,
+            tasks,
+        };
+
+        this.drawCanvas();
+    },
+});
@@ -0,0 +1,37 @@
+<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">
+            <toy-button
+                class="random-button"
+                type="primary"
+                bind:click="onRandom"
+                width="100%"
+                height="80rpx"
+                icon="refresh"
+                icon-class-prefix="toy-icon">
+                随机生成
+            </toy-button>
+        </view>
+    </view>
+    <view class="empty"></view>
+</view>
+<math-bottom-buttons
+    disabled="{{!hasContent}}"
+    bind:share="onShareAppMessage"
+    bind:export="exportToPrint" />
+<share-guide-popup
+    show="{{showShareDialog}}"
+    bind:onClose="onCloseShareDialog"
+    bind:onShareSuccess="onShareSuccess" />
@@ -0,0 +1 @@
+@import '../../base/baseDrawPage.wxss';
@@ -0,0 +1,253 @@
+/**
+ * 方位涂涂乐绘制服务
+ */
+
+import { BaseDrawService } from '../../../service/baseDraw';
+import { getImage } from '../../../utils/index';
+
+/**
+ * 方位涂涂乐数据
+ */
+export interface PositionColoringData {
+    /** 参考网格（3x3），存储图片索引数组，按行优先顺序 */
+    referenceGrid: number[];
+    /** 任务数组，每个任务包含图片索引和位置 */
+    tasks: Array<{
+        imageIndex: number;
+        position: { x: number; y: number };
+    }>;
+}
+
+/**
+ * 方位涂涂乐绘制服务
+ */
+class PositionColoringDraw extends BaseDrawService {
+    gridData: PositionColoringData | null = null;
+
+    constructor(
+        canvas: Canvas,
+        ctx: RenderingContext,
+        options?: Record<string, any>,
+    ) {
+        super(canvas, ctx, options);
+    }
+
+    /**
+     * 绘制方位涂涂乐内容
+     */
+    async draw(gridData: PositionColoringData) {
+        if (!gridData || !gridData.referenceGrid || !gridData.tasks) {
+            return;
+        }
+
+        this.setPrintConfig();
+        this.gridData = gridData;
+        this.clear();
+        this.setPaper();
+
+        // 绘制Header
+        if (this.headerType !== 'minimal') {
+            await this.drawHeader();
+        } else {
+            this.drawMiniHeader();
+        }
+
+        // 绘制内容区域
+        this.drawDivider();
+        await this.drawContent({
+            canvas: this.canvas,
+            ctx: this.ctx,
+            gridData: this.gridData,
+            canvasWidth: this.canvasWidth,
+            startY: this.currentY,
+        });
+    }
+
+    /**
+     * 绘制内容区域
+     */
+    private async drawContent(params: {
+        canvas: WechatMiniprogram.Canvas;
+        ctx: RenderingContext;
+        gridData: PositionColoringData;
+        canvasWidth: number;
+        startY: number;
+    }): Promise<void> {
+        const { ctx, gridData, canvasWidth } = params;
+        let { startY } = params;
+
+        startY = startY + 25;
+
+        const margin = 40; // 左右边距
+        const gridSize = 3; // 3x3网格
+        const cellSize = 65; // 每个格子的大小
+        const gridWidth = cellSize * gridSize;
+        const gridHeight = cellSize * gridSize;
+
+        // 绘制参考网格（上面的九宫格）
+        const referenceGridY = startY;
+        const referenceGridX =
+            margin + (canvasWidth - margin * 2 - gridWidth) / 2; // 居中
+
+        // 绘制参考网格的网格线
+        this.drawGridLines(
+            ctx,
+            referenceGridX,
+            referenceGridY,
+            gridWidth,
+            gridHeight,
+            cellSize,
+            gridSize,
+        );
+
+        // 绘制参考网格中的图片
+        for (let i = 0; i < 9; i++) {
+            const row = Math.floor(i / 3);
+            const col = i % 3;
+            const imageIndex = gridData.referenceGrid[i];
+            const imageX = referenceGridX + col * cellSize + cellSize / 2 - 25; // 图片居中，假设图片大小50x50
+            const imageY = referenceGridY + row * cellSize + cellSize / 2 - 25;
+
+            try {
+                const imagePath = `/focusPages/shared/aeests/material/${imageIndex}.png`;
+                const image = await getImage(this.canvas, imagePath);
+                // @ts-ignore - 微信小程序图片对象有 width 和 height 属性
+                const imageSize = 50;
+                ctx.drawImage(image, imageX, imageY, imageSize, imageSize);
+            } catch (error) {
+                console.error(`加载图片失败: ${imageIndex}`, error);
+            }
+        }
+
+        // 绘制虚线分隔
+        const dividerY = referenceGridY + gridHeight + 30;
+        ctx.strokeStyle = '#999';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([4, 4]); // 虚线
+        ctx.beginPath();
+        ctx.moveTo(margin, dividerY);
+        ctx.lineTo(canvasWidth - margin, dividerY);
+        ctx.stroke();
+        ctx.setLineDash([]); // 重置为实线
+
+        // 绘制任务区域（三行三列）
+        const taskStartY = dividerY + 30;
+        const taskImageSize = 40; // 任务图片大小
+        const taskGridSize = 36; // 任务网格每个格子的大小
+        const taskGridWidth = taskGridSize * gridSize;
+        const taskGridHeight = taskGridSize * gridSize;
+        const taskSpacing = 4; // 图片和网格之间的间距
+        const taskGroupWidth = taskImageSize + taskSpacing + taskGridWidth;
+        const taskGroupSpacing = 24; // 任务组之间的间距
+        const taskRowSpacing = 40; // 行之间的间距
+
+        // 计算每行的起始X位置（居中）
+        const totalTaskRowWidth = 3 * taskGroupWidth + 2 * taskGroupSpacing;
+        const taskRowStartX =
+            margin + (canvasWidth - margin * 2 - totalTaskRowWidth) / 2;
+
+        for (let rowIndex = 0; rowIndex < 3; rowIndex++) {
+            const currentY =
+                taskStartY + rowIndex * (taskGridHeight + taskRowSpacing);
+
+            for (let colIndex = 0; colIndex < 3; colIndex++) {
+                const taskIndex = rowIndex * 3 + colIndex;
+                const task = gridData.tasks[taskIndex];
+                if (!task) continue;
+
+                const currentX =
+                    taskRowStartX +
+                    colIndex * (taskGroupWidth + taskGroupSpacing);
+
+                // 绘制任务图片（左侧）
+                try {
+                    const imagePath = `/focusPages/shared/aeests/material/${task.imageIndex}.png`;
+                    const image = await getImage(this.canvas, imagePath);
+                    const imageX = currentX;
+                    const imageY =
+                        currentY + (taskGridHeight - taskImageSize) / 2; // 垂直居中
+                    ctx.drawImage(
+                        image,
+                        imageX,
+                        imageY,
+                        taskImageSize,
+                        taskImageSize,
+                    );
+                } catch (error) {
+                    console.error(
+                        `加载任务图片失败: ${task.imageIndex}`,
+                        error,
+                    );
+                }
+
+                // 绘制任务网格（右侧）
+                const taskGridX = currentX + taskImageSize + taskSpacing;
+                const taskGridY = currentY;
+
+                // 绘制网格线
+                this.drawGridLines(
+                    ctx,
+                    taskGridX,
+                    taskGridY,
+                    taskGridWidth,
+                    taskGridHeight,
+                    taskGridSize,
+                    gridSize,
+                );
+
+                // 第一行需要标记位置（涂深灰色）
+                if (rowIndex === 0) {
+                    const { x, y } = task.position;
+                    const cellX = taskGridX + x * taskGridSize;
+                    const cellY = taskGridY + y * taskGridSize;
+
+                    // 填充深灰色
+                    ctx.fillStyle = '#666666';
+                    ctx.fillRect(
+                        cellX + 1,
+                        cellY + 1,
+                        taskGridSize - 2,
+                        taskGridSize - 2,
+                    );
+                }
+            }
+        }
+    }
+
+    /**
+     * 绘制网格线
+     */
+    private drawGridLines(
+        ctx: RenderingContext,
+        gridStartX: number,
+        gridStartY: number,
+        gridWidth: number,
+        gridHeight: number,
+        cellSize: number,
+        gridSize: number,
+    ): void {
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([]); // 实线
+
+        // 绘制垂直线
+        for (let i = 0; i <= gridSize; i++) {
+            const x = gridStartX + i * cellSize;
+            ctx.beginPath();
+            ctx.moveTo(x, gridStartY);
+            ctx.lineTo(x, gridStartY + gridHeight);
+            ctx.stroke();
+        }
+
+        // 绘制水平线
+        for (let i = 0; i <= gridSize; i++) {
+            const y = gridStartY + i * cellSize;
+            ctx.beginPath();
+            ctx.moveTo(gridStartX, y);
+            ctx.lineTo(gridStartX + gridWidth, y);
+            ctx.stroke();
+        }
+    }
+}
+
+export default PositionColoringDraw;
@@ -23,6 +23,13 @@
    "condition": {
        "miniprogram": {
            "list": [
+                {
+                    "name": "focusPages/positionColoring/positionColoring",
+                    "pathName": "focusPages/positionColoring/positionColoring",
+                    "query": "id=position-coloring",
+                    "scene": null,
+                    "launchMode": "default"
+                },
                {
                    "name": "pages/focusIndex/focusIndex",
                    "pathName": "pages/focusIndex/focusIndex",