feat:练字贴生成

miniprogram/app.json

@@ -45,15 +45,9 @@
             },
             {
                 "pagePath": "pages/copyBook/copyBook",
-                "iconPath": "assets/tabBar/icon-shape.png",
+                "iconPath": "assets/tabBar/icon-edit.png",
-                "selectedIconPath": "assets/tabBar/icon-shape-active.png",
+                "selectedIconPath": "assets/tabBar/icon-edit-active.png",
                 "text": "练字"
-            },
-            {
-                "pagePath": "pages/wordDemo/index",
-                "iconPath": "assets/tabBar/icon-shape.png",
-                "selectedIconPath": "assets/tabBar/icon-shape-active.png",
-                "text": "练字2"
             }
         ]
     }

miniprogram/components/word-picker/word-picker.less

@@ -74,6 +74,7 @@
 
 
 .selected-words {
+    height: 66rpx;
     padding: 28rpx;
     font-size: 28rpx;
     color: #141414;

miniprogram/components/word-picker/word-picker.ts

@@ -14,17 +14,20 @@ Component({
             type: Number,
             value: 0,
         },
-        cardList: {
+        selectedWords: {
             type: Array,
-            value: [],
+            value: []
         },
+        max: {
+            type: Number,
+            value: 6
+        }
     },
     /**
      * 组件的初始数据
      */
     data: {
         wordList: WORDS,
-        selectedWords: [] as string[],
     },
     lifetimes: {
         ready() {
@@ -60,7 +63,7 @@ Component({
 
         onWordClick(e: WechatMiniprogram.TouchEvent) {
             const { word } = e.currentTarget.dataset;
-            const { selectedWords } = this.data;
+            const { selectedWords, max } = this.data;
             let newSelectedWords = selectedWords as string[];
 
             // 如果是已选中的文字,直接取消选中
@@ -68,9 +71,9 @@ Component({
                 newSelectedWords = newSelectedWords.filter((item) => item !== word);
             } else {
                 // 如果是未选中的文字,先判断是否已选满6个
-                if (newSelectedWords.length >= 6) {
+                if (newSelectedWords.length >= max) {
                     wx.showToast({
-                        title: '最多选择6个字',
+                        title: `最多选择 ${max} 个字`,
                         icon: 'none',
                     });
                     return;

miniprogram/components/word-picker/word-picker.wxml

@@ -8,7 +8,7 @@
     close-on-click-overlay="{{true}}"
     safe-area-inset-bottom="{{false}}"
     position="bottom"
-    custom-style="height:75%"
+    custom-style="height:78%"
     custom-class="word-picker">
     <view class="word-picker-content">
         <view class="word-picker-title">请选择文字</view>

miniprogram/pages/copyBook/copyBook.ts

@@ -10,28 +10,29 @@ Page({
 
     data: {
         // 选中的汉字列表
-        words: ['赢', '张', '政'] as string[],
+        words: [] as string[],
         showSelectWordPopup: false,
         showColorPopup: false,
         currentKey: 0,
         currentColor: '',
-
-        // 田字格配置
-        // rows: 10,
-        // cols: 12,
-        // rowsArray: [] as number[],
-        // colsArray: [] as number[],
         boxWidth: 0,
         boxHeight: 0,
     },
 
     onLoad() {
-        // this.initGrid();
         this.loadSvgWords();
+        const hasShowIntroduction =
+            wx.getStorageSync('hasShowIntroduction') || false;
+        if (!hasShowIntroduction) {
+            this.setData({
+                words: ['好', '好', '学', '习', '天', '天', '向', '上']
+            })
+        }
     },
 
-    onReady() {
+    async onReady() {
-        this.setCanvasBoxSize();
+        await this.setCanvasBoxSize();
+        this.initCanvas()
     },
 
     loadSvgWords() {
@@ -44,9 +45,7 @@ Page({
                     wx.showToast({ title: '加载中...', icon: 'loading' });
                     const parsedData = JSON.parse(res.data as string);
                     this.svgWords = parsedData;
-                    console.log('this.svgWords.length----:', Object.keys(this.svgWords).length)
                     wx.hideToast();
-                    console.log('SVG words loaded successfully');
                     const { words } = this.data as any;
                     if (words && words.length > 0) {
                         this.drawPracticeSheet().catch(console.error);
@@ -73,16 +72,75 @@ Page({
             return;
         }
 
-        const chars = this.splitToSingleChars(text);
         const { words } = this.data as any;
-        const exists = new Set(words);
+
-        const newWords = [...words];
+        // 1. 先检查原来已有的汉字是否超过11个
-        chars.forEach((ch) => {
+        if (words.length >= 11) {
-            if (!exists.has(ch)) {
+            wx.showToast({
-                newWords.push(ch);
+                title: '最多只能添加 11 个字哦！',
+                icon: 'none',
+                duration: 2000,
+            });
+            return;
+        }
+
+        // 2. 解析新输入的汉字
+        const newChars = this.splitToSingleChars(text);
+        if (newChars.length === 0) {
+            wx.showToast({ title: '请输入有效汉字', icon: 'none' });
+            return;
+        }
+
+        // 3. 保留原有汉字，追加新汉字（去重处理）
+        const existingWords = new Set(words); // 用于快速查找重复
+        const updatedWords: string[] = [...words]; // 保留原有汉字
+        let addedCount = 0;
+        let skippedCount = 0;
+
+        for (const char of newChars) {
+            // 检查是否已达到11个字的限制
+            if (updatedWords.length >= 11) {
+                break;
             }
+
+            // 检查是否已存在（去重）
+            if (existingWords.has(char)) {
+                skippedCount++;
+                continue;
+            }
+
+            // 添加新汉字
+            updatedWords.push(char);
+            existingWords.add(char);
+            addedCount++;
+        }
+
+        // 4. 更新数据并提示
+        this.setData({ words: updatedWords }, () => {
+            this.drawPracticeSheet().catch(console.error);
         });
-        this.setData({ words: newWords }, () => this.drawPracticeSheet().catch(console.error));
+
+        // 5. 显示添加结果提示
+        if (addedCount > 0) {
+            let message = `成功添加 ${addedCount} 个汉字`;
+            if (skippedCount > 0) {
+                message += `，跳过 ${skippedCount} 个重复汉字`;
+            }
+            if (updatedWords.length >= 11) {
+                message += '，已达到最大限制';
+            }
+            wx.showToast({
+                title: message,
+                icon: 'none',
+                duration: 2000,
+            });
+        } else if (skippedCount > 0) {
+            wx.showToast({
+                title: `所有汉字都已存在，跳过 ${skippedCount} 个重复汉字`,
+                icon: 'none',
+                duration: 2000,
+            });
+        }
     },
 
     // 选择面板
@@ -98,11 +156,12 @@ Page({
         this.setData({ words: newWords, showSelectWordPopup: false }, () => this.drawPracticeSheet().catch(console.error));
     },
 
-    // 删除与颜色
+    // 删除
     deleteWordCard(e: any) {
-        const { word } = e.detail;
+        const { key } = e.detail;
         const { words } = this.data as any;
-        const next = words.filter((w: string) => w !== word);
+        const next = words.filter((_: string, index: number) => index !== key);
+        console.log("-nextnext-----:", next);
         this.setData({ words: next }, () => this.drawPracticeSheet().catch(console.error));
     },
 
@@ -117,16 +176,6 @@ Page({
         return matches || [];
     },
 
-    // 田字格
-    /* initGrid() {
-        const { rows, cols } = this.data as any;
-        const rowsArray = Array.from({ length: rows }, (_, i) => i);
-        const colsArray = Array.from({ length: cols }, (_, i) => i);
-        console.log('rowsArray----:', rowsArray)
-        console.log('colsArray----:', colsArray)
-        this.setData({ rowsArray, colsArray });
-    }, */
-
     setCanvasBoxSize() {
         const query = wx.createSelectorQuery();
         query
@@ -158,7 +207,7 @@ Page({
                         this.ctx = ctx;
                         this.wordDrawService = new WordDrawService(canvas, ctx, {
                             appName: '涂鸦丫小程序',
-                            appHint: '练字|识字|打印',
+                            appHint: '练字|识字|涂色｜打印',
                             title: '田字格  练 字  贴',
                             subTitle: '按笔画临摹练习'
                         });
@@ -174,26 +223,53 @@ Page({
             this.initCanvas();
         }
         const { words } = this.data as any;
-        if (!words || words.length === 0) {
-            return;
-        }
-
         // 构建汉字笔画数据
+        const wordsMap: Record<string, string[]> | null = this.checkWords(words);
+        await this.wordDrawService?.draw(wordsMap || {});
+    },
+
+    checkWords(words: string[]): Record<string, string[]> | null {
+        // 构建汉字笔画数据（已去重）
         const wordsMap: Record<string, string[]> = {};
-        console.log('this.svgWords----:', this.svgWords)
+        const supportedWords: string[] = [];
+
+        // 按顺序处理每个汉字
         words.forEach((word: string) => {
             if (this.svgWords[word]) {
                 wordsMap[word] = this.svgWords[word];
+                supportedWords.push(word);
             }
         });
-        if (Object.keys(wordsMap).length === 0) {
+
+        if (supportedWords.length === 0) {
             wx.showToast({ title: '暂不支持这些汉字', icon: 'none' });
-            return;
+            return null;
         }
 
-        await this.wordDrawService?.draw(wordsMap);
+        const maxRow = 11, maxCol = 9;
-    },
+        let rowIndex = 0;
+        const characters = Object.keys(wordsMap);
+        const newWorksMap: Record<string, string[]> = {};
+        const boundaryWords: string[] = []
 
+        characters.forEach((char) => {
+            const strokes = wordsMap[char] || [];
+            const strokeCount = strokes.length;
+            const totalCells = 1 + strokeCount + 2;
+            const totalRows = Math.ceil(totalCells / maxCol);
+            rowIndex += totalRows;
+            if (rowIndex <= maxRow) {
+                newWorksMap[char] = wordsMap[char];
+            } else {
+                boundaryWords.push(char)
+            }
+        });
+
+        if (boundaryWords.length > 0) {
+            wx.showToast({ title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`, icon: 'none' });
+        }
+        return newWorksMap;
+    },
     // 下载打印练字贴
     exportToPrint() {
         const { words } = this.data as any;

miniprogram/pages/copyBook/copyBook.wxml

@@ -39,12 +39,10 @@
         <text class="wrapper-title">预览练字田字格</text>
         <view id="canvasWrapper" class="canvas-wrapper">
             <canvas
-                wx:if="{{words}}"
                 type="2d"
                 id="canvasContent"
                 class="canvas-content"
                 style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-            <view wx:else class="empty-tip">请选择或输入汉字后生成田字格</view>
         </view>
     </view>
 
@@ -75,6 +73,7 @@
     <word-picker
         show="{{showSelectWordPopup}}"
         selectedWords="{{words}}"
+        max="11"
         bind:onClose="closeSelectWordPopup"
         bind:onChange="onChangeWord" />
 

miniprogram/pages/index/index.ts

@@ -71,9 +71,6 @@ Page({
                     const boxWidth = rect.width;
                     const boxHeight = boxWidth / (width / height);
 
-                    console.log('boxWidth----:', boxWidth)
-                    console.log('boxHeight----:', boxHeight)
-
                     // 然后初始化canvas
                     wx.createSelectorQuery()
                         .select('#canvasContent')
@@ -182,7 +179,7 @@ Page({
         }
         if (isBeyond) {
             wx.showToast({
-                title: '最多只能添加6个字，多余的字为被添加哦！',
+                title: '最多只能添加6个字，多余的字未被添加哦！',
                 icon: 'none',
                 duration: 2000,
             });

miniprogram/service/wordDrawService.ts

@@ -116,7 +116,6 @@ function drawStrokes({
 }: DrawStrokesParams) {
     // 模板中使用 54x54 的视窗尺寸
     const viewBoxSize = 54;
-    const scale = size / viewBoxSize;
 
     // 添加内边距：在田字格四周预留空间，避免笔画贴边
     const padding = size * 0.1; // 内边距为田字格大小的10%
@@ -127,22 +126,22 @@ function drawStrokes({
     const contentOffsetX = offsetX + padding;
     const contentOffsetY = offsetY + padding;
 
-    console.log('drawStrokes 参数:', {
+    // console.log('drawStrokes 参数:', {
-        strokesCount: strokes.length,
+    //     strokesCount: strokes.length,
-        uptoInclusive,
+    //     uptoInclusive,
-        offsetX,
+    //     offsetX,
-        offsetY,
+    //     offsetY,
-        size,
+    //     size,
-        padding,
+    //     padding,
-        contentSize,
+    //     contentSize,
-        contentOffsetX,
+    //     contentOffsetX,
-        contentOffsetY,
+    //     contentOffsetY,
-        originalScale: scale,
+    //     originalScale: scale,
-        contentScale,
+    //     contentScale,
-        fillStyle,
+    //     fillStyle,
-        strokeStyle,
+    //     strokeStyle,
-        lineWidth
+    //     lineWidth
-    });
+    // });
 
     for (let s = 0; s <= uptoInclusive && s < strokes.length; s++) {
         // console.log(`绘制第 ${s} 个笔画:`, strokes[s]);
@@ -357,7 +356,7 @@ class WordDrawService {
     drawContent(wordsMap: Record<string, string[]>) {
         const { canvas, ctx } = this;
         const characters = Object.keys(wordsMap).slice(0, 10);
-        if (characters.length === 0) return;
+
 
         // 布局参数
         const topGap = 50; // 与页眉分割线的距离
@@ -365,7 +364,6 @@ class WordDrawService {
         const rightMargin = 120;
         const bottomMargin = 120;
         const contentTop = this.currentY + topGap;
-        console.log('contentTop----:', contentTop)
         const contentWidth = canvas.width - leftMargin - rightMargin;
         const contentHeight = canvas.height - contentTop - bottomMargin;
 
@@ -374,24 +372,19 @@ class WordDrawService {
         const rowGap = 36;   // 最小格子行间距，用于保证纵向不拥挤，后续可动态调整为实际间距
 
         // 计算每行可容纳的田字格数量
-        const maxPerRow = Math.max(1, Math.floor((contentWidth + minGap) / (cellSize + minGap)));
+        const columnNumber = Math.max(1, Math.floor((contentWidth + minGap) / (cellSize + minGap)));
 
         // 计算每列可容纳的田字格数量
-        const actualRows = Math.max(1, Math.floor((contentHeight + rowGap) / (cellSize + rowGap)));
+        const rowNumber = Math.max(1, Math.floor((contentHeight + rowGap) / (cellSize + rowGap)));
 
         // 计算总需要的田字格数量
-        const totalCellsNeeded = actualRows * maxPerRow;
+        const totalCellsNeeded = rowNumber * columnNumber;
-
-        // 计算实际需要的行数
-        console.log('actualRows----:', actualRows)
-        console.log('totalCellsNeeded----:', totalCellsNeeded)
-        console.log('maxPerRow----:', maxPerRow)
 
         // 动态调整间距以充分利用空间（在允许的最小间距基础上弹性扩展以适配画布）
-        const actualRowGap = actualRows > 1 ? (contentHeight - actualRows * cellSize) / (actualRows - 1) : 0;
+        const actualRowGap = rowNumber > 1 ? (contentHeight - rowNumber * cellSize) / (rowNumber - 1) : 0;
-        const actualColGap = maxPerRow > 1 ? (contentWidth - maxPerRow * cellSize) / (maxPerRow - 1) : 0;
+        const actualColGap = columnNumber > 1 ? (contentWidth - columnNumber * cellSize) / (columnNumber - 1) : 0;
 
-        console.log(`布局信息: 总格数=${totalCellsNeeded}, 行数=${actualRows}, 列数=${maxPerRow}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
+        console.log(`布局信息: 总格数=${totalCellsNeeded}, 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
 
         // 第一阶段：绘制所有空田字格
         this.drawEmptyGrids({
@@ -401,21 +394,23 @@ class WordDrawService {
             cellSize,
             colGap: actualColGap,
             rowGap: actualRowGap,
-            maxPerRow,
+            rowNumber,
-            maxRows: actualRows
+            columnNumber
         });
 
-        // 第二阶段：绘制练字内容
+        if (characters.length > 0) {
-        this.drawPracticeContent({
+            // 第二阶段：绘制练字内容
-            ctx,
+            this.drawPracticeContent({
-            wordsMap,
+                ctx,
-            startX: leftMargin,
+                wordsMap,
-            startY: contentTop,
+                startX: leftMargin,
-            cellSize,
+                startY: contentTop,
-            colGap: actualColGap,
+                cellSize,
-            rowGap: actualRowGap,
+                colGap: actualColGap,
-            maxPerRow
+                rowGap: actualRowGap,
-        });
+                columnNumber
+            });
+        };
     }
 
     /**
@@ -444,8 +439,8 @@ class WordDrawService {
         cellSize,
         colGap,
         rowGap,
-        maxPerRow,
+        rowNumber,
-        maxRows
+        columnNumber
     }: {
         ctx: RenderingContext;
         startX: number;
@@ -453,12 +448,12 @@ class WordDrawService {
         cellSize: number;
         colGap: number;
         rowGap: number;
-        maxPerRow: number;
+        rowNumber: number;  // 行数
-        maxRows: number;
+        columnNumber: number;  // 列数
     }) {
         console.log('drawEmptyGrids startY----:', startY)
-        for (let row = 0; row < maxRows; row++) {
+        for (let row = 0; row < rowNumber; row++) {
-            for (let col = 0; col < maxPerRow; col++) {
+            for (let col = 0; col < columnNumber; col++) {
                 const x = startX + col * (cellSize + colGap) + cellSize / 2;
                 const y = startY + row * (cellSize + rowGap) + cellSize / 2;
                 drawTianZiGrid({ ctx, x, y, size: cellSize });
@@ -477,7 +472,7 @@ class WordDrawService {
         cellSize,
         colGap,
         rowGap,
-        maxPerRow
+        columnNumber
     }: {
         ctx: RenderingContext;
         wordsMap: Record<string, string[]>;
@@ -486,18 +481,21 @@ class WordDrawService {
         cellSize: number;
         colGap: number;
         rowGap: number;
-        maxPerRow: number;
+        columnNumber: number;
     }) {
         const characters = Object.keys(wordsMap);
-        let cellIndex = 0;
+        const reservedCells = 2;
+        let rowIndex = 0, columnIndex = 0;
 
-        console.log('开始绘制练字内容，汉字数量:', characters.length);
+        // console.log('开始绘制练字内容，汉字数量:', characters.length);
 
-        characters.forEach((char, charIndex) => {
+        characters.forEach((uniqueKey, charIndex) => {
-            const strokes = wordsMap[char] || [];
+            const strokes = wordsMap[uniqueKey] || [];
             const strokeCount = strokes.length;
+            // 从uniqueKey中提取原始汉字（去掉后缀）
+            const originalChar = uniqueKey.split('_')[0];
 
-            console.log(`绘制第 ${charIndex + 1} 个汉字 "${char}"，笔画数: ${strokeCount}`);
+            console.log(`绘制第 ${charIndex + 1} 个汉字 "${originalChar}"，笔画数: ${strokeCount}`);
 
             // 1. 预览格：显示完整汉字（黑色）
             this.drawPreviewCell({
@@ -508,10 +506,9 @@ class WordDrawService {
                 cellSize,
                 colGap,
                 rowGap,
-                maxPerRow,
+                rowIndex,
-                cellIndex
             });
-            cellIndex++;
+            columnIndex++;
 
             // 2. 练习格：逐笔画显示（红色）
             for (let strokeIndex = 0; strokeIndex < strokeCount; strokeIndex++) {
@@ -525,29 +522,30 @@ class WordDrawService {
                     cellSize,
                     colGap,
                     rowGap,
-                    maxPerRow,
+                    rowIndex,
-                    cellIndex
+                    columnIndex
                 });
-                cellIndex++;
+                columnIndex++;
-
+                if (columnIndex >= columnNumber) {
-                console.log(`笔画 ${strokeIndex + 1} 绘制完成，当前 cellIndex: ${cellIndex}`);
+                    columnIndex = 0;
+                    rowIndex++;
+                }
+                // console.log(`笔画 ${strokeIndex + 1} 绘制完成，当前 columnIndex: ${columnIndex}`);
+            }
+            if (columnIndex + reservedCells > columnNumber) {
+                columnIndex = 0;
+                rowIndex++;
             }
-
-            // 3. 汉字间留空：每个汉字后留2个空白格
-            cellIndex += 0;
 
             // 4. 强制下一个汉字换行到新行的第一个田字格
             if (charIndex < characters.length - 1) { // 不是最后一个汉字
-                const currentRow = Math.floor(cellIndex / maxPerRow);
+                rowIndex = rowIndex + 1;
-                const nextRow = currentRow + 1;
+                columnIndex = 0;
-                cellIndex = nextRow * maxPerRow;
+                // console.log(`汉字 "${char}" 绘制完成，强制换行到新行，下一个汉字从 rowIndex: ${rowIndex}, columnIndex: ${columnIndex} 开始`);
-                console.log(`汉字 "${char}" 绘制完成，强制换行到新行，下一个汉字从 cellIndex: ${cellIndex} 开始`);
-            } else {
-                console.log(`汉字 "${char}" 绘制完成，这是最后一个汉字`);
             }
         });
 
-        console.log('所有汉字绘制完成');
+        // console.log('所有汉字绘制完成');
     }
 
     /**
@@ -561,8 +559,7 @@ class WordDrawService {
         cellSize,
         colGap,
         rowGap,
-        maxPerRow,
+        rowIndex
-        cellIndex
     }: {
         ctx: RenderingContext;
         strokes: string[];
@@ -571,15 +568,13 @@ class WordDrawService {
         cellSize: number;
         colGap: number;
         rowGap: number;
-        maxPerRow: number;
+        rowIndex: number;
-        cellIndex: number;
     }) {
-        const row = Math.floor(cellIndex / maxPerRow);
+        const columnIndex = 0;
-        const col = cellIndex % maxPerRow;
+        const x = startX + columnIndex * (cellSize + colGap);
-        const x = startX + col * (cellSize + colGap);
+        const y = startY + rowIndex * (cellSize + rowGap);
-        const y = startY + row * (cellSize + rowGap);
 
-        console.log(`预览格 [${cellIndex}] 坐标: (${x}, ${y}), 行列: (${row}, ${col}), 笔画数: ${strokes.length}`);
+        // console.log(`预览格 [${rowIndex}, ${columnIndex}] 坐标: (${x}, ${y}), 笔画数: ${strokes.length}`);
 
         // 绘制完整汉字（黑色，较粗）
         drawStrokes({
@@ -607,8 +602,8 @@ class WordDrawService {
         cellSize,
         colGap,
         rowGap,
-        maxPerRow,
+        rowIndex,
-        cellIndex
+        columnIndex
     }: {
         ctx: RenderingContext;
         strokes: string[];
@@ -618,15 +613,13 @@ class WordDrawService {
         cellSize: number;
         colGap: number;
         rowGap: number;
-        maxPerRow: number;
+        rowIndex: number;
-        cellIndex: number;
+        columnIndex: number;
     }) {
-        const row = Math.floor(cellIndex / maxPerRow);
+        const x = startX + columnIndex * (cellSize + colGap);
-        const col = cellIndex % maxPerRow;
+        const y = startY + rowIndex * (cellSize + rowGap);
-        const x = startX + col * (cellSize + colGap);
-        const y = startY + row * (cellSize + rowGap);
 
-        console.log(`练习格 [${cellIndex}] 坐标: (${x}, ${y}), 行列: (${row}, ${col}), 笔画: ${strokeIndex + 1}/${strokes.length}`);
+        // console.log(`练习格 [${rowIndex}, ${columnIndex}] 坐标: (${x}, ${y}), 笔画: ${strokeIndex + 1}/${strokes.length}`);
 
         // 绘制到指定笔画的汉字（红色，中等粗细）
         drawStrokes({
@@ -643,7 +636,6 @@ class WordDrawService {
     }
 
     drawLine(linY: number) {
-        console.log('drawLine linY----:', linY)
         const { canvas, ctx } = this;
         ctx.strokeStyle = '#000';
         ctx.lineWidth = 2;