feat:优化页面按钮等样式

miniprogram/pages/index/index.ts

@@ -54,6 +54,12 @@ Page({
     },
 
     onReady() {
+        // 当cardList为空时，canvas相关元素不会被渲染，所以不需要在这里初始化
+        // 尺寸计算将在initCanvas方法中进行
+    },
+
+    initCanvas() {
+        // 先获取canvasWrapper的尺寸来计算canvas尺寸
         const query = wx.createSelectorQuery();
         query
             .select('#canvasWrapper')
@@ -65,36 +71,37 @@ Page({
 
                     this.boxHeight = boxHeight;
                     this.boxWidth = boxWidth;
-                    this.initCanvas(boxWidth, boxHeight);
+
+                    // 然后初始化canvas
+                    wx.createSelectorQuery()
+                        .select('#canvasContent')
+                        .fields({
+                            node: true,
+                            size: true,
+                        })
+                        .exec((res) => {
+                            if (res[0] && res[0].node) {
+                                const canvas = res[0].node;
+                                const ctx = canvas.getContext('2d');
+                                if (ctx) {
+                                    this.canvas = canvas;
+                                    this.ctx = ctx;
+                                    this.textDrawService = new TextDrawService(canvas, ctx);
+                                    this.setData({ boxWidth, boxHeight });
+
+                                    // 初始化完成后，如果有cardList内容则立即绘制
+                                    const currentCardList = this.data.cardList;
+                                    if (currentCardList.length > 0) {
+                                        this.textDrawService.draw(currentCardList);
+                                    }
+                                }
+                            }
+                        });
                 }
             })
             .exec();
     },
 
-    initCanvas(boxWidth: number, boxHeight: number) {
-        wx.createSelectorQuery()
-            .select('#canvasContent')
-            .fields({
-                node: true,
-                size: true,
-            })
-            .exec((res) => {
-                if (res[0] && res[0].node) {
-                    const canvas = res[0].node;
-                    const ctx = canvas.getContext('2d');
-                    if (ctx) {
-                        this.canvas = canvas;
-                        this.ctx = ctx;
-                        // const rect = res[0];
-                        this.textDrawService = new TextDrawService(canvas, ctx);
-                        // textDrawService.draw();
-                        this.setData({ boxWidth, boxHeight });
-                        this.drawCanvas();
-                    }
-                }
-            });
-    },
-
     /** 变更cardList 并更新canvas */
     drawCanvas(
         updatedCardList?: Array<{ color: string; word: string }>,
@@ -102,12 +109,26 @@ Page({
     ) {
         if (updatedCardList) {
             this.setData({ cardList: updatedCardList }, () => {
-                this.textDrawService?.draw(updatedCardList!);
+                // 如果cardList有内容且canvas未初始化，先初始化canvas
+                if (!this.canvas) {
+                    this.initCanvas();
+                }
+                // 如果canvas已初始化且有内容，则绘制
+                if (this.textDrawService && updatedCardList!.length > 0) {
+                    this.textDrawService.draw(updatedCardList!);
+                }
                 callback();
             });
         } else {
-            updatedCardList = this.data.cardList;
-            this.textDrawService?.draw(updatedCardList);
+            const currentCardList = this.data.cardList;
+            // 如果cardList有内容且canvas未初始化，先初始化canvas
+            if (!this.canvas) {
+                this.initCanvas();
+            }
+            // 如果canvas已初始化且有内容，则绘制
+            if (this.textDrawService && currentCardList.length > 0) {
+                this.textDrawService.draw(currentCardList);
+            }
         }
     },
 
@@ -212,7 +233,7 @@ Page({
     },
 
     onColorTap(e: WechatMiniprogram.CustomEvent) {
-        const { key, word, color } = e.detail;
+        const { key, color } = e.detail;
         this.setData({
             showColorPopup: true,
             currentKey: key,
@@ -262,6 +283,10 @@ Page({
     },
 
     clearCardList() {
+        // 清空cardList时，重置canvas相关引用，因为DOM元素会被移除
+        this.canvas = null;
+        this.ctx = null;
+        this.textDrawService = null;
         this.drawCanvas([]);
     },