feat:完成生成打印纸的步骤

2025-06-02 10:05:59 +08:00
parent 419818eb24
commit 82c55fece3
18 changed files with 726 additions and 46 deletions
@@ -1,9 +1,125 @@
+import { WATER_COLORS, PAPER_SIZE } from '../../constants/index';
+import TextDrawService from '../../service/textDrawService';
+
 Page({
-    data: {},
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    textDrawService: null as TextDrawService | null,
+
+    data: {
+        cardList: [] as Array<{ color: string; word: string }>,
+    },
+
+    onReady() {
+        const query = wx.createSelectorQuery();
+        query
+            .select('#canvasWrapper')
+            .boundingClientRect((rect) => {
+                if (rect) {
+                    const { width, height } = PAPER_SIZE['A4'];
+                    const boxWidth = rect.width;
+                    const boxHeight = boxWidth / (width / height);
+
+                    this.boxHeight = boxHeight;
+                    this.boxWidth = boxWidth;
+                    this.initCanvas(boxWidth, boxHeight);
+                }
+            })
+            .exec();
+    },
+
+    // renderCanvas() {
+    //     // wx.nextTick(() => {
+    //     // this.setCanvasBoxSize();
+    //     // });
+    //     console.log('this.boxWidth:', this.boxWidth);
+    //     console.log('this.boxHeight:', this.boxHeight);
+    //     if (this.boxWidth && this.boxHeight) {
+    //         this.initCanvas(this.boxWidth, this.boxHeight);
+    //     }
+    // },
+
+    // setCanvasBoxSize() {
+    //     const { windowWidth } = wx.getWindowInfo();
+    //     console.log('windowWidth---:', windowWidth);
+    //     const query = wx.createSelectorQuery();
+    //     query
+    //         .select('#canvasWrapper')
+    //         .boundingClientRect((rect) => {
+    //             if (rect) {
+    //                 const boxWidth = rect.width;
+    //                 const boxHeight = boxWidth / (width / height);
+
+    //                 console.log('boxWidth----:', boxWidth);
+    //                 console.log('boxHeight----:', boxHeight);
+
+    //                 this.initCanvas(boxHeight, boxWidth);
+    //             }
+    //         })
+    //         .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];
+                        console.log('rect-----:', rect);
+                        this.textDrawService = new TextDrawService(canvas, ctx);
+                        // textDrawService.draw();
+                        this.setData({ boxWidth, boxHeight });
+                    }
+                }
+            });
+    },

    tapCard(e: WechatMiniprogram.TouchEvent) {
        const { url } = e.currentTarget.dataset;
        console.log('navigateTo url:', url);
        wx.navigateTo({ url });
    },
+
+    onConfirmInput(e: WechatMiniprogram.Input) {
+        const { value } = e.detail;
+        console.log('indexPage onConfirmInput value:', value);
+        const characters = value.split('');
+        const shuffledColors = [...WATER_COLORS.basic12].sort(
+            () => Math.random() - 0.5,
+        );
+        const updatedCardList = characters.map((char, index) => ({
+            color: shuffledColors[index % shuffledColors.length].hex,
+            word: char,
+        }));
+        console.log('updatedCardList', updatedCardList);
+        this.setData({ cardList: updatedCardList });
+        // this.renderCanvas();
+        this.textDrawService?.draw(updatedCardList);
+    },
+
+    deleteWordCard(e: WechatMiniprogram.CustomEvent) {
+        const { key, word } = e.detail;
+        console.log('deleteWordCard key:', key, 'word:', word);
+        const { cardList } = this.data;
+        const updatedCardList = cardList.filter((_, index) => index !== key);
+        this.setData({ cardList: updatedCardList });
+        wx.showToast({
+            title: `已删除 "${word}"`,
+            icon: 'none',
+            duration: 2000,
+        });
+        // this.renderCanvas();
+        this.textDrawService?.draw(updatedCardList);
+    },
 });