feat:优化页面按钮等样式

2025-10-13 16:03:48 +08:00
parent 9df15e1ab4
commit 7ac81eb961
5 changed files with 59 additions and 42 deletions
@@ -1,5 +1,5 @@
 {
-    "navigationBarTitleText": "涂鸦丫",
+    "navigationBarTitleText": "涂鸦丫-识字",
    "navigationBarBackgroundColor": "#FFD719",
    "homeButton": true,
    "backgroundColor": "#F6F6F6",
@@ -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([]);
    },

@@ -18,6 +18,7 @@
                    wx:for="{{cardList}}"
                    wx:for-item="item"
                    wx:for-index="index"
+                    key="{{index}}"
                    word="{{item.word}}"
                    color="{{item.color}}"
                    bind:onDelete="deleteWordCard"
@@ -59,12 +60,9 @@
            </toy-button>
        </view>
    </view>
-    <view id="previewWrapper" class="wrapper">
+    <view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
        <text class="wrapper-title">预览打印效果</text>
-        <view
-            wx:if="{{!isPCDevtool}}"
-            id="canvasWrapper"
-            class="canvas-wrapper">
+        <view id="canvasWrapper" class="canvas-wrapper">
            <canvas
                type="2d"
                id="canvasContent"