feat:V2.5.4增加线条识别

2025-12-19 09:48:37 +08:00
parent e97dd8f159
commit 99686e30bd
26 changed files with 682 additions and 15 deletions
@@ -0,0 +1,146 @@
+import LineRecognitionDraw from '../shared/service/lineRecognitionDraw';
+import { createFocusPage } from '../shared/common/focusPageMixin';
+import {
+    LineRecognitionData,
+    LineType,
+    LineTypeConfig,
+} from '../shared/service/lineRecognitionDraw';
+import { NUMBER_COLORS } from '../../constants/colors';
+
+/**
+ * 广告位ID：adunit-89cff2de998f1146
+请返回广告位列表，获取广告位代码，将代码插入小程序页面中适合位置，发布后即展现对应广告位。
+ */
+
+// 线条类型配置
+const LINE_TYPES: Array<{ type: LineType; name: string }> = [
+    { type: 'straight', name: '直线' },
+    { type: 'dashed', name: '虚线' },
+    { type: 'wavy', name: '波浪线' },
+    { type: 'zigzag', name: '锯齿线' },
+    { type: 'spiral', name: '电话线' },
+];
+
+createFocusPage({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as LineRecognitionDraw | null,
+    lineData: null as LineRecognitionData | null,
+
+    data: {
+        pageTitle: '线条识别',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+    },
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'line-recognition';
+        this.setData({
+            functionId,
+        });
+        this.initPageInfo(functionId, '线条识别');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => {
+                return new LineRecognitionDraw(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.lineData) {
+            return;
+        }
+
+        try {
+            await this.drawService.draw(this.lineData);
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成
+     */
+    onRandom() {
+        // 从NUMBER_COLORS中随机选择5种颜色（排除11和12：柔和棕色和柔和黑灰）
+        const colorKeys = Object.keys(NUMBER_COLORS)
+            .map(Number)
+            .filter((key) => key !== 11 && key !== 12); // 排除柔和棕色和柔和黑灰
+        const shuffledColors = [...colorKeys].sort(() => Math.random() - 0.5);
+        const selectedColorKeys = shuffledColors.slice(0, 5);
+
+        // 创建5个线条配置（随机排列）
+        const shuffledLineTypes = [...LINE_TYPES].sort(
+            () => Math.random() - 0.5,
+        );
+        const referenceLines: LineTypeConfig[] = shuffledLineTypes.map(
+            (lineType, index) => ({
+                type: lineType.type,
+                name: lineType.name,
+                color: NUMBER_COLORS[selectedColorKeys[index]],
+            }),
+        );
+
+        // 创建练习区域的16个色块（2列×8行）
+        const practiceBlocks: Array<{
+            color: string;
+            lineType: LineType;
+            x: number;
+            y: number;
+        }> = [];
+
+        // 为每行生成色块
+        for (let row = 0; row < 8; row++) {
+            for (let col = 0; col < 2; col++) {
+                // 随机选择一个线条类型和颜色
+                const randomLineIndex = Math.floor(
+                    Math.random() * referenceLines.length,
+                );
+                const selectedLine = referenceLines[randomLineIndex];
+
+                // 生成随机错落感（X轴偏移：-20到20，Y轴偏移：-8到8，确保不重叠）
+                // 行高55，色块35，所以Y轴偏移最大8，确保不重叠
+                const xOffset = (Math.random() - 0.5) * 40;
+                const yOffset = (Math.random() - 0.5) * 16;
+
+                practiceBlocks.push({
+                    color: selectedLine.color,
+                    lineType: selectedLine.type,
+                    x: xOffset,
+                    y: yOffset,
+                });
+            }
+        }
+
+        this.lineData = {
+            referenceLines,
+            practiceBlocks,
+        };
+
+        this.drawCanvas();
+    },
+});