feat:2.5.6 广告组件优化

miniprogram/focusPages/codeConnect/codeConnect.json

@@ -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"
+    }
+}

miniprogram/focusPages/codeConnect/codeConnect.ts

@@ -0,0 +1,150 @@
+import CodeConnectDraw from '../shared/service/codeConnectDraw';
+import { createFocusPage } from '../shared/common/focusPageMixin';
+import { CodeConnectData } from '../shared/service/codeConnectDraw';
+import { WATER_COLORS } from '../../constants/colors';
+
+createFocusPage({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as CodeConnectDraw | null,
+    codeData: null as CodeConnectData | null,
+
+    data: {
+        pageTitle: '译码连线',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+    },
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'code-connect';
+        this.setData({
+            functionId,
+        });
+        this.initPageInfo(functionId, '译码连线');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => {
+                return new CodeConnectDraw(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.codeData) {
+            return;
+        }
+
+        try {
+            await this.drawService.draw(this.codeData);
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成
+     */
+    onRandom() {
+        // 随机选择起始数字：1、2或3
+        const startNumberOptions = [1, 2, 3];
+        const startNumber =
+            startNumberOptions[
+                Math.floor(Math.random() * startNumberOptions.length)
+            ];
+
+        // 生成8个连续的数字（1-8、2-9或3-10）
+        const numbers: number[] = [];
+        for (let i = 0; i < 8; i++) {
+            numbers.push(startNumber + i);
+        }
+
+        // 从WATER_COLORS.extended24中随机选择8种不重复的颜色
+        const colorIndices = Array.from(
+            { length: WATER_COLORS.extended24.length },
+            (_, i) => i,
+        );
+        const shuffledIndices = [...colorIndices].sort(
+            () => Math.random() - 0.5,
+        );
+        const selectedIndices = shuffledIndices.slice(0, 8);
+
+        // 创建颜色映射
+        const colorMap = numbers.map((number, index) => ({
+            number,
+            color: WATER_COLORS.extended24[selectedIndices[index]].hex,
+        }));
+
+        // 生成4个组的题目
+        const groups: Array<{
+            sequence: number[];
+            dots: Array<{
+                number: number;
+                color: string;
+                angle: number;
+            }>;
+        }> = [];
+
+        for (let i = 0; i < 4; i++) {
+            // 从当前数字范围中随机选择6个数字（不重复）
+            const shuffledNumbers = [...numbers].sort(
+                () => Math.random() - 0.5,
+            );
+            const sequence = shuffledNumbers.slice(0, 5);
+
+            // 生成8个圆点的位置（圆形分布）
+            const dots: Array<{
+                number: number;
+                color: string;
+                angle: number;
+            }> = [];
+
+            // 8个圆点均匀分布在圆周上
+            for (let j = 0; j < 8; j++) {
+                const angle = (j / 8) * Math.PI * 2 - Math.PI / 2; // 从顶部开始，逆时针
+                const number = numbers[j];
+                const colorInfo = colorMap.find((m) => m.number === number);
+                dots.push({
+                    number,
+                    color: colorInfo?.color || '#000',
+                    angle,
+                });
+            }
+
+            groups.push({
+                sequence,
+                dots,
+            });
+        }
+
+        this.codeData = {
+            colorMap,
+            startNumber,
+            groups,
+        };
+
+        this.drawCanvas();
+    },
+});

miniprogram/focusPages/codeConnect/codeConnect.wxml

@@ -0,0 +1,38 @@
+<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>
+        <draw-ad type="focusDraw"></draw-ad>
+    </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/codeConnect/codeConnect.wxss

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

miniprogram/focusPages/colorPattern/colorPattern.json

@@ -7,6 +7,7 @@
     "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"
+        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
+        "draw-ad": "../../components/draw-ad/draw-ad"
     }
 }

miniprogram/focusPages/colorPattern/colorPattern.wxml

@@ -24,7 +24,7 @@
                 随机生成
             </toy-button>
         </view>
-        <ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
+        <draw-ad type="focusDraw"></draw-ad>
     </view>
     <view class="empty"></view>
 </view>

miniprogram/focusPages/gridDrawing/gridDrawing.json

@@ -7,6 +7,7 @@
     "usingComponents": {
         "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
         "math-type-selector": "../../components/math-type-selector/math-type-selector",
-        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
+        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
+        "draw-ad": "../../components/draw-ad/draw-ad"
     }
 }

miniprogram/focusPages/gridDrawing/gridDrawing.wxml

@@ -17,7 +17,7 @@
             type-actions="{{typeActions}}"
             bind:select="onSelectType"
             bind:random="onRandom" />
-        <ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
+        <draw-ad type="focusDraw"></draw-ad>
     </view>
 
     <view class="empty"></view>

miniprogram/focusPages/gridReasoning/gridReasoning.json

@@ -7,6 +7,7 @@
     "usingComponents": {
         "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
         "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
-        "math-type-selector": "../../components/math-type-selector/math-type-selector"
+        "math-type-selector": "../../components/math-type-selector/math-type-selector",
+        "draw-ad": "../../components/draw-ad/draw-ad"
     }
 }

miniprogram/focusPages/gridReasoning/gridReasoning.wxml

@@ -17,7 +17,7 @@
             type-actions="{{operatorTypeActions}}"
             bind:select="onSelectType"
             bind:random="onRandom" />
-        <ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
+        <draw-ad type="focusDraw"></draw-ad>
     </view>
     <view class="empty"></view>
 </view>

miniprogram/focusPages/lineRecognition/lineRecognition.json

@@ -7,6 +7,7 @@
     "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"
+        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
+        "draw-ad": "../../components/draw-ad/draw-ad"
     }
 }

miniprogram/focusPages/lineRecognition/lineRecognition.wxml

@@ -24,7 +24,7 @@
                 随机生成
             </toy-button>
         </view>
-        <ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
+        <draw-ad type="focusDraw"></draw-ad>
     </view>
     <view class="empty"></view>
 </view>

miniprogram/focusPages/matchConnect/matchConnect.json

@@ -7,6 +7,7 @@
     "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"
+        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
+        "draw-ad": "../../components/draw-ad/draw-ad"
     }
 }

miniprogram/focusPages/matchConnect/matchConnect.wxml

@@ -24,7 +24,7 @@
                 随机生成
             </toy-button>
         </view>
-        <ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
+        <draw-ad type="focusDraw"></draw-ad>
     </view>
     <view class="empty"></view>
 </view>

miniprogram/focusPages/positionColoring/positionColoring.json

@@ -7,6 +7,7 @@
     "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"
+        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
+        "draw-ad": "../../components/draw-ad/draw-ad"
     }
 }

miniprogram/focusPages/positionColoring/positionColoring.wxml

@@ -24,7 +24,7 @@
                 随机生成
             </toy-button>
         </view>
-        <ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
+        <draw-ad type="focusDraw"></draw-ad>
     </view>
     <view class="empty"></view>
 </view>

miniprogram/focusPages/shape/shape.json

@@ -13,6 +13,7 @@
         "shape-card": "../../components/shape-card/shape-card",
         "shape-picker": "../../components/shape-picker/shape-picker",
         "color-picker": "../../components/color-picker/color-picker",
-        "share-guide-popup": "../../components/share-guide-popup/share-guide-popup"
+        "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
+        "draw-ad": "../../components/draw-ad/draw-ad"
     }
 }

miniprogram/focusPages/shape/shape.wxml

@@ -64,7 +64,7 @@
                 class="canvas-content"
                 style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
         </view>
-        <ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
+        <draw-ad type="focusDraw"></draw-ad>
     </view>
     <view class="empty"></view>
 </view>

miniprogram/focusPages/shapeSymbol/shapeSymbol.json

@@ -7,6 +7,7 @@
     "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"
+        "math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
+        "draw-ad": "../../components/draw-ad/draw-ad"
     }
 }

miniprogram/focusPages/shapeSymbol/shapeSymbol.wxml

@@ -24,7 +24,7 @@
                 随机生成
             </toy-button>
         </view>
-        <ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
+        <draw-ad type="focusDraw"></draw-ad>
     </view>
     <view class="empty"></view>
 </view>

miniprogram/focusPages/shared/service/codeConnectDraw.ts

@@ -0,0 +1,221 @@
+/**
+ * 译码连线绘制服务
+ */
+
+import { BaseDrawService } from '../../../service/baseDraw';
+
+/**
+ * 译码连线数据
+ */
+export interface CodeConnectData {
+    /** 参考区域：数字到颜色的映射（8个数字，可能是1-8、2-9、3-10） */
+    colorMap: Array<{
+        number: number; // 数字（可能是1-8、2-9、3-10）
+        color: string;
+    }>;
+    /** 起始数字（1、2或3） */
+    startNumber: number;
+    /** 内容区域：4个组的题目 */
+    groups: Array<{
+        /** 数字序列（6个数字，用-连接） */
+        sequence: number[];
+        /** 圆环内圆点的位置和颜色（8个圆点，圆形分布） */
+        dots: Array<{
+            number: number; // 对应的数字
+            color: string; // 对应的颜色
+            angle: number; // 角度（弧度）
+        }>;
+    }>;
+}
+
+/**
+ * 译码连线绘制服务
+ */
+class CodeConnectDraw extends BaseDrawService {
+    codeData: CodeConnectData | null = null;
+
+    constructor(
+        canvas: Canvas,
+        ctx: RenderingContext,
+        options?: Record<string, any>,
+    ) {
+        super(canvas, ctx, options);
+    }
+
+    /**
+     * 绘制译码连线内容
+     */
+    async draw(codeData: CodeConnectData) {
+        if (!codeData || !codeData.colorMap || !codeData.groups) {
+            return;
+        }
+
+        this.setPrintConfig();
+        this.codeData = codeData;
+        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,
+            codeData: this.codeData,
+            canvasWidth: this.canvasWidth,
+            startY: this.currentY,
+        });
+    }
+
+    /**
+     * 绘制内容区域
+     */
+    private async drawContent(params: {
+        canvas: WechatMiniprogram.Canvas;
+        ctx: RenderingContext;
+        codeData: CodeConnectData;
+        canvasWidth: number;
+        startY: number;
+    }): Promise<void> {
+        const { ctx, codeData, canvasWidth } = params;
+        let { startY } = params;
+
+        startY = startY + 25;
+
+        const margin = 40; // 左右边距
+
+        // ========== 上部参考区域 ==========
+        const referenceStartY = startY;
+        const referenceCellSize = 50; // 每个方格的大小
+        const referenceGridWidth = referenceCellSize * 8; // 网格总宽度（8列）
+
+        // 计算参考区域的起始X坐标（居中）
+        const referenceStartX =
+            margin + (canvasWidth - margin * 2 - referenceGridWidth) / 2;
+
+        // 使用drawGridLines绘制网格（2行8列，格子之间没有间距）
+        this.drawGridLines(
+            referenceStartX,
+            referenceStartY,
+            referenceCellSize,
+            referenceCellSize,
+            8,
+            2,
+        );
+
+        // 绘制第一行：数字
+        for (let i = 0; i < 8; i++) {
+            const cellX = referenceStartX + i * referenceCellSize;
+            const cellY = referenceStartY;
+
+            // 绘制数字
+            const number = codeData.colorMap[i].number;
+            ctx.fillStyle = '#000';
+            ctx.font = 'bold 24px Arial';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(
+                number.toString(),
+                cellX + referenceCellSize / 2,
+                cellY + referenceCellSize / 2,
+            );
+        }
+
+        // 绘制第二行：圆点
+        const dotRowY = referenceStartY + referenceCellSize;
+        const dotRadius = 15; // 圆点半径
+
+        for (let i = 0; i < 8; i++) {
+            const cellX = referenceStartX + i * referenceCellSize;
+            const cellY = dotRowY;
+
+            // 绘制圆点（有边框）
+            const dotX = cellX + referenceCellSize / 2;
+            const dotY = cellY + referenceCellSize / 2;
+            const color = codeData.colorMap[i].color;
+            this.drawDot(ctx, dotX, dotY, dotRadius, color, '#000');
+        }
+
+        // ========== 虚线分割 ==========
+        const dividerY = dotRowY + referenceCellSize + 30;
+        this.drawDashedDivider(dividerY, margin);
+
+        // ========== 下部内容区域 ==========
+        const contentStartY = dividerY + 40;
+        const groupSpacingX = 80; // 一行中两组之间的间距
+        const groupSpacingY = 45; // 行之间的间距
+        const textCircleSpacing = 15; // 数字文本与圆环的间距
+        const circleRadius = 90; // 大圆环半径
+        const dotPadding = 10; // 圆点距离圆环边线的间距
+        const innerRadius = circleRadius - dotPadding - dotRadius; // 圆点分布圆的半径
+        const textHeight = 25; // 数字文本的高度
+
+        // 计算每组的总宽度（包括圆环）
+        const groupWidth = circleRadius * 2;
+        const totalGroupsWidth = 2 * groupWidth + groupSpacingX;
+        const groupsStartX =
+            margin + (canvasWidth - margin * 2 - totalGroupsWidth) / 2;
+
+        // 绘制4个组（两行两列）
+        for (let row = 0; row < 2; row++) {
+            for (let col = 0; col < 2; col++) {
+                const groupIndex = row * 2 + col;
+                const group = codeData.groups[groupIndex];
+                if (!group) continue;
+
+                const groupX =
+                    groupsStartX + col * (groupWidth + groupSpacingX);
+                const groupY =
+                    contentStartY +
+                    row *
+                        (circleRadius * 2 +
+                            textHeight +
+                            groupSpacingY +
+                            textCircleSpacing);
+
+                // 绘制大圆环
+                const circleCenterX = groupX + groupWidth / 2;
+                const circleCenterY =
+                    groupY + textHeight + circleRadius + textCircleSpacing;
+                ctx.strokeStyle = '#888';
+                ctx.lineWidth = 1;
+                ctx.beginPath();
+                ctx.arc(
+                    circleCenterX,
+                    circleCenterY,
+                    circleRadius,
+                    0,
+                    Math.PI * 2,
+                );
+                ctx.stroke();
+
+                // 绘制数字序列（在圆环正上方）
+                const sequenceText = group.sequence.join('-');
+                ctx.fillStyle = '#000';
+                ctx.font = 'bold 20px Arial';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'bottom';
+                ctx.fillText(sequenceText, circleCenterX, groupY + textHeight);
+
+                // 绘制圆环内的8个圆点（圆形分布）
+                for (const dot of group.dots) {
+                    const dotX =
+                        circleCenterX + Math.cos(dot.angle) * innerRadius;
+                    const dotY =
+                        circleCenterY + Math.sin(dot.angle) * innerRadius;
+
+                    // 绘制圆点（有边框）
+                    this.drawDot(ctx, dotX, dotY, dotRadius, dot.color, '#000');
+                }
+            }
+        }
+    }
+}
+
+export default CodeConnectDraw;