feat:九九乘法表

2026-01-16 18:02:16 +08:00
parent 7dd10c7902
commit 9c13b44806
25 changed files with 1388 additions and 13 deletions
@@ -0,0 +1,72 @@
+import MultiplicationTableDraw from '../shared/service/multiplicationTableDraw';
+import {
+    createMathPage,
+    CanvasDataState,
+} from '../shared/common/mathPageMixin';
+
+createMathPage({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as MultiplicationTableDraw | null,
+    multiplicationTableData: null as {} | null,
+
+    data: {
+        pageTitle: '九九乘法表',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+    } as CanvasDataState,
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'multiplication-table';
+        this.setData({
+            pageTitle: '九九乘法表',
+        });
+        this.initPageInfo(functionId, '九九乘法表');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => {
+                return new MultiplicationTableDraw(canvas, ctx, options);
+            },
+            drawServiceOptions: {
+                title: '九九乘法表',
+            },
+            onCanvasReady: () => {
+                // 初始绘制
+                this.drawCanvas();
+            },
+        });
+    },
+
+    /**
+     * 绘制Canvas内容
+     */
+    async drawCanvas() {
+        if (!this.ctx || !this.drawService) {
+            return;
+        }
+
+        try {
+            await this.drawService.draw({});
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成（重新绘制，颜色会随机变化）
+     */
+    onRandom() {
+        this.drawCanvas();
+    },
+});