From 7ac81eb961181e3aa5e7963a7a650071dcb3be10 Mon Sep 17 00:00:00 2001 From: R524809 Date: Mon, 13 Oct 2025 16:03:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=AD=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/app.json | 6 --- miniprogram/pages/index/index.json | 2 +- miniprogram/pages/index/index.ts | 83 +++++++++++++++++++----------- miniprogram/pages/index/index.wxml | 8 ++- miniprogram/pages/shape/index.json | 2 +- 5 files changed, 59 insertions(+), 42 deletions(-) diff --git a/miniprogram/app.json b/miniprogram/app.json index 2fc6fbf..235b6ef 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -42,12 +42,6 @@ "iconPath": "assets/tabBar/icon-shape.png", "selectedIconPath": "assets/tabBar/icon-shape-active.png", "text": "图形" - }, - { - "pagePath": "pages/copyBook/index", - "iconPath": "assets/tabBar/icon-word.png", - "selectedIconPath": "assets/tabBar/icon-word-active.png", - "text": "练字" } ] } diff --git a/miniprogram/pages/index/index.json b/miniprogram/pages/index/index.json index 621fbc1..d511005 100644 --- a/miniprogram/pages/index/index.json +++ b/miniprogram/pages/index/index.json @@ -1,5 +1,5 @@ { - "navigationBarTitleText": "涂鸦丫", + "navigationBarTitleText": "涂鸦丫-识字", "navigationBarBackgroundColor": "#FFD719", "homeButton": true, "backgroundColor": "#F6F6F6", diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index 39f97e0..ff8eb70 100644 --- a/miniprogram/pages/index/index.ts +++ b/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([]); }, diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index 87dc0cd..43107a1 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -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 @@ - + 预览打印效果 - +