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

miniprogram/focusPages/positionColoring/positionColoring.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",
+        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
+    }
+}

miniprogram/focusPages/positionColoring/positionColoring.ts

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

miniprogram/focusPages/positionColoring/positionColoring.wxml

@@ -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" />

miniprogram/focusPages/positionColoring/positionColoring.wxss

@@ -0,0 +1 @@
+@import '../../base/baseDrawPage.wxss';