feat:2.6.1增加数物对应和根据颜色画图形

2025-12-23 13:35:19 +08:00
parent 9b6a0a26cc
commit 20496c3cc8
28 changed files with 940 additions and 277 deletions
@@ -0,0 +1,13 @@
+{
+    "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",
+        "draw-ad": "../../components/draw-ad/draw-ad"
+    }
+}
@@ -0,0 +1,132 @@
+import ColorShapeMatchDraw from '../shared/service/colorShapeMatchDraw';
+import { createFocusPage } from '../shared/common/focusPageMixin';
+import { ColorShapeMatchData } from '../shared/service/colorShapeMatchDraw';
+import { SHAPE_SYMBOL_SHAPES } from '../shared/shapes/shapeSymbolShapes';
+import { getRandomUniqueNumberColors } from '../../constants/colors';
+
+createFocusPage({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as ColorShapeMatchDraw | null,
+    gridData: null as ColorShapeMatchData | null,
+
+    data: {
+        pageTitle: '根据颜色画图形',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+    },
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'color-shape-match';
+        this.setData({
+            functionId,
+        });
+        this.initPageInfo(functionId, '根据颜色画图形');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => {
+                return new ColorShapeMatchDraw(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() {
+        // 从所有图形中随机选择4个
+        const shapes = [...SHAPE_SYMBOL_SHAPES].filter(
+            (shape) => shape.id !== 'cross',
+        );
+        const selectedShapes = shapes
+            .sort(() => Math.random() - 0.5)
+            .slice(0, 4);
+
+        // 获取4个不重复的颜色
+        const colors = getRandomUniqueNumberColors(4);
+
+        // 创建阅览区域的数据，过滤掉 cross
+        const legendItems = selectedShapes.map((shape, index) => ({
+            shapeId: shape.id,
+            color: colors[index],
+        }));
+
+        // 创建练习区域的数据（5行5列，共25个格子）
+        // 随机填充这4种颜色，确保每种颜色至少出现一次
+        const practiceGrid: Array<Array<string | null>> = [];
+        const allColors: (string | null)[] = new Array(25).fill(null);
+
+        // 先随机选择4个位置，每个位置分配一种颜色（确保每种颜色至少出现一次）
+        const positions: number[] = [];
+        for (let i = 0; i < 25; i++) {
+            positions.push(i);
+        }
+        const shuffledPositions = [...positions].sort(
+            () => Math.random() - 0.5,
+        );
+
+        // 前4个位置分配4种颜色
+        for (let i = 0; i < 4; i++) {
+            allColors[shuffledPositions[i]] = colors[i];
+        }
+
+        // 剩余21个位置随机分配这4种颜色
+        for (let i = 4; i < 25; i++) {
+            const randomColor =
+                colors[Math.floor(Math.random() * colors.length)];
+            allColors[shuffledPositions[i]] = randomColor;
+        }
+
+        // 转换为5x5的二维数组
+        for (let row = 0; row < 5; row++) {
+            const practiceRow: Array<string | null> = [];
+            for (let col = 0; col < 5; col++) {
+                const index = row * 5 + col;
+                practiceRow.push(allColors[index]);
+            }
+            practiceGrid.push(practiceRow);
+        }
+
+        this.gridData = {
+            legendItems,
+            practiceGrid,
+        };
+
+        this.drawCanvas();
+    },
+});
@@ -0,0 +1,6 @@
+<!-- 模版不能跨包引用 -->
+<import src="../shared/templates/canvas-page-template.wxml" />
+
+<template
+    is="canvasPageTemplate"
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
@@ -0,0 +1 @@
+@import '../../base/baseDrawPage.wxss';
@@ -3,13 +3,4 @@

 <template
    is="canvasPageTemplate"
-    data="{{
-    boxWidth: boxWidth, 
-    boxHeight: boxHeight, 
-    hasTypeSelector: true, 
-    currentModeName: currentModeName, 
-    typeActions: typeActions, 
-    adType: 'focusDraw', 
-    disabled: !hasContent, 
-    showShareDialog: showShareDialog
-}}" />
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: true, currentModeName: currentModeName, typeActions: typeActions, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
@@ -3,13 +3,4 @@

 <template
    is="canvasPageTemplate"
-    data="{{
-        boxWidth: boxWidth, 
-        boxHeight: boxHeight, 
-        hasTypeSelector: true, 
-        currentModeName: currentOperatorTypeName, 
-        typeActions: operatorTypeActions, 
-        adType: 'focusDraw', 
-        disabled: !hasContent, 
-        showShareDialog: showShareDialog
-    }}" />
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: true, currentModeName: currentOperatorTypeName, typeActions: operatorTypeActions, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
@@ -0,0 +1,158 @@
+/**
+ * 根据颜色画图形绘制服务
+ */
+
+import { BaseDrawService } from '../../../service/baseDraw';
+import { drawShapeSymbolShape } from '../shapes/shapeSymbolShapes';
+
+/**
+ * 根据颜色画图形数据
+ */
+export interface ColorShapeMatchData {
+    /** 阅览区域的4组数据 */
+    legendItems: Array<{
+        shapeId: string;
+        color: string;
+    }>;
+    /** 练习区域的5x5网格数据 */
+    practiceGrid: Array<Array<string | null>>; // 存储颜色，null表示空白
+}
+
+/**
+ * 根据颜色画图形绘制服务
+ */
+class ColorShapeMatchDraw extends BaseDrawService {
+    gridData: ColorShapeMatchData | null = null;
+
+    constructor(
+        canvas: Canvas,
+        ctx: RenderingContext,
+        options?: Record<string, any>,
+    ) {
+        super(canvas, ctx, options);
+    }
+
+    /**
+     * 绘制根据颜色画图形内容
+     */
+    async draw(gridData: ColorShapeMatchData) {
+        if (!gridData || !gridData.legendItems || !gridData.practiceGrid) {
+            return;
+        }
+
+        this.gridData = gridData;
+        this.prepareDraw();
+        await this.drawHeaderAndDivider();
+        this.drawContent({
+            ctx: this.ctx,
+            gridData: this.gridData,
+            canvasWidth: this.canvasWidth,
+            startY: this.currentY,
+        });
+    }
+
+    /**
+     * 绘制内容区域
+     */
+    private drawContent(params: {
+        ctx: RenderingContext;
+        gridData: ColorShapeMatchData;
+        canvasWidth: number;
+        startY: number;
+    }): void {
+        const { ctx, gridData, canvasWidth } = params;
+        let { startY } = params;
+
+        startY = startY + 25;
+
+        const margin = 40; // 左右边距
+        const groupSpacing = 40; // 组间距
+        const groupSize = 80; // 每组的大小（图形外框大小）
+        const dotRadius = 15; // 中间圆点的半径
+
+        // 计算阅览区域的总宽度
+        const totalWidth = groupSize * 4 + groupSpacing * 3; // 4组 + 3个间距
+        const legendStartX =
+            margin + (canvasWidth - margin * 2 - totalWidth) / 2; // 居中
+        const legendStartY = startY;
+
+        // 绘制阅览区域的4组
+        gridData.legendItems.forEach((item, index) => {
+            const groupX = legendStartX + index * (groupSize + groupSpacing);
+            const groupY = legendStartY;
+            const centerX = groupX + groupSize / 2;
+            const centerY = groupY + groupSize / 2;
+
+            // 绘制外部图形（有边框，无填充）
+            drawShapeSymbolShape(
+                ctx,
+                item.shapeId,
+                centerX,
+                centerY,
+                groupSize * 1.1, // 图形大小略小于外框
+                {
+                    fillColor: null,
+                    strokeColor: '#000',
+                    strokeWidth: 2,
+                },
+            );
+
+            // 绘制中间的圆点（无边线，有填充）
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, dotRadius, 0, Math.PI * 2);
+            ctx.fillStyle = item.color;
+            ctx.fill();
+        });
+
+        // 绘制虚线分割线
+        const dividerY = legendStartY + groupSize + 30;
+        this.drawDashedDivider(dividerY, margin);
+
+        // 绘制练习区域（5行5列）
+        const practiceStartY = dividerY + 30;
+        const practiceCols = 5;
+        const practiceRows = 5;
+        const practiceCellSize = 100; // 每个格子的宽度
+        const practiceGridWidth = practiceCellSize * practiceCols;
+
+        // 计算练习区域起始X位置（居中）
+        const practiceStartX =
+            margin + (canvasWidth - margin * 2 - practiceGridWidth) / 2;
+
+        // // 绘制练习区域网格线
+        // this.drawGridLines(
+        //     practiceStartX,
+        //     practiceStartY,
+        //     practiceCellSize,
+        //     practiceCellSize,
+        //     practiceCols,
+        //     practiceRows,
+        // );
+
+        // 绘制练习区域的圆点
+        // const dotRadius = 15; // 圆点半径
+        for (let row = 0; row < practiceRows; row++) {
+            const practiceRow = gridData.practiceGrid[row];
+            if (!practiceRow) continue;
+
+            const rowY = practiceStartY + row * practiceCellSize;
+            const cellCenterY = rowY + practiceCellSize / 2;
+
+            for (let col = 0; col < practiceCols; col++) {
+                const color = practiceRow[col];
+                if (!color) continue;
+
+                const colX = practiceStartX + col * practiceCellSize;
+                const cellCenterX = colX + practiceCellSize / 2;
+
+                // 绘制圆点（无边线，有填充）
+                ctx.beginPath();
+                ctx.arc(cellCenterX, cellCenterY, dotRadius, 0, Math.PI * 2);
+                ctx.fillStyle = color;
+                ctx.fill();
+            }
+        }
+    }
+}
+
+export default ColorShapeMatchDraw;
@@ -145,12 +145,13 @@ export function drawShapeSymbolShape(
            break;

        case 'triangle':
-            // 三角形缩小为原来的0.9倍
-            const triangleRadius = radius * 0.9;
+            // 三角形缩小为原来的0.9倍，整体中心提高
+            // const triangleRadius = radius * 0.9;
+            const bottomY = radius * 0.7; // 减少底部Y坐标，使整体中心提高
            ctx.beginPath();
-            ctx.moveTo(0, -triangleRadius);
-            ctx.lineTo(-triangleRadius, triangleRadius);
-            ctx.lineTo(triangleRadius, triangleRadius);
+            ctx.moveTo(0, -radius);
+            ctx.lineTo(-radius, bottomY);
+            ctx.lineTo(radius, bottomY);
            ctx.closePath();
            drawPath();
            break;
@@ -176,9 +177,10 @@ export function drawShapeSymbolShape(
            drawPath();
            break;

+        // 椭圆
        case 'ellipse':
            ctx.beginPath();
-            ctx.ellipse(0, 0, radius * 0.8, radius * 0.6, 0, 0, Math.PI * 2);
+            ctx.ellipse(0, 0, radius, radius * 0.8, 0, 0, Math.PI * 2);
            drawPath();
            break;

@@ -287,17 +289,21 @@ export function drawShapeSymbolShape(

        // 扇形
        case 'sector':
-            // 扇形（90度扇形），圆心在格子中心点偏左二分之一的位置
-            const sectorCenterX = -radius / 2; // 向左偏移半径的一半
-            const sectorCenterY = 0;
+            const sectorRadius = radius * 1.5;
+            // 扇形（圆弧在正上方，圆点在正下方）
+            const sectorCenterX = 0; // 圆心在水平中心
+            const sectorCenterY = sectorRadius * 0.55; // 圆心在正下方
            ctx.beginPath();
            ctx.moveTo(sectorCenterX, sectorCenterY);
+            // 从左侧上方到右侧上方绘制圆弧（135度到225度）
            ctx.arc(
                sectorCenterX,
                sectorCenterY,
-                radius,
+                sectorRadius,
+                (-3 * Math.PI) / 4,
                -Math.PI / 4,
-                Math.PI / 4,
+                // (Math.PI * 3) / 4, // 左侧上方（135度）
+                // (Math.PI * 5) / 4, // 右侧上方（225度）
                false,
            );
            ctx.lineTo(sectorCenterX, sectorCenterY);