diff --git a/miniprogram/app.json b/miniprogram/app.json
index 116e85d..d8195a8 100644
--- a/miniprogram/app.json
+++ b/miniprogram/app.json
@@ -45,15 +45,9 @@
},
{
"pagePath": "pages/copyBook/copyBook",
- "iconPath": "assets/tabBar/icon-shape.png",
- "selectedIconPath": "assets/tabBar/icon-shape-active.png",
+ "iconPath": "assets/tabBar/icon-edit.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"
}
]
}
diff --git a/miniprogram/assets/tabBar/icon-edit-active.png b/miniprogram/assets/tabBar/icon-edit-active.png
new file mode 100644
index 0000000..4a2d38f
Binary files /dev/null and b/miniprogram/assets/tabBar/icon-edit-active.png differ
diff --git a/miniprogram/assets/tabBar/icon-edit.png b/miniprogram/assets/tabBar/icon-edit.png
new file mode 100644
index 0000000..c644c20
Binary files /dev/null and b/miniprogram/assets/tabBar/icon-edit.png differ
diff --git a/miniprogram/components/word-picker/word-picker.less b/miniprogram/components/word-picker/word-picker.less
index 4860914..e15323c 100644
--- a/miniprogram/components/word-picker/word-picker.less
+++ b/miniprogram/components/word-picker/word-picker.less
@@ -74,6 +74,7 @@
.selected-words {
+ height: 66rpx;
padding: 28rpx;
font-size: 28rpx;
color: #141414;
diff --git a/miniprogram/components/word-picker/word-picker.ts b/miniprogram/components/word-picker/word-picker.ts
index c871149..3af2e68 100644
--- a/miniprogram/components/word-picker/word-picker.ts
+++ b/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;
diff --git a/miniprogram/components/word-picker/word-picker.wxml b/miniprogram/components/word-picker/word-picker.wxml
index ca0f979..6a7b5dc 100644
--- a/miniprogram/components/word-picker/word-picker.wxml
+++ b/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">
请选择文字
diff --git a/miniprogram/pages/copyBook/copyBook.ts b/miniprogram/pages/copyBook/copyBook.ts
index 8fed7dd..cc0e52d 100644
--- a/miniprogram/pages/copyBook/copyBook.ts
+++ b/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() {
- this.setCanvasBoxSize();
+ async onReady() {
+ 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];
- chars.forEach((ch) => {
- if (!exists.has(ch)) {
- newWords.push(ch);
+
+ // 1. 先检查原来已有的汉字是否超过11个
+ if (words.length >= 11) {
+ wx.showToast({
+ 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 | null = this.checkWords(words);
+ await this.wordDrawService?.draw(wordsMap || {});
+ },
+
+ checkWords(words: string[]): Record | null {
+ // 构建汉字笔画数据（已去重）
const wordsMap: Record = {};
- 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 = {};
+ 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;
diff --git a/miniprogram/pages/copyBook/copyBook.wxml b/miniprogram/pages/copyBook/copyBook.wxml
index 616b8c0..db0525a 100644
--- a/miniprogram/pages/copyBook/copyBook.wxml
+++ b/miniprogram/pages/copyBook/copyBook.wxml
@@ -39,12 +39,10 @@
预览练字田字格
- 请选择或输入汉字后生成田字格
@@ -75,6 +73,7 @@
diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts
index 8115428..811f062 100644
--- a/miniprogram/pages/index/index.ts
+++ b/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,
});
diff --git a/miniprogram/service/wordDrawService.ts b/miniprogram/service/wordDrawService.ts
index ac5bc84..83500cd 100644
--- a/miniprogram/service/wordDrawService.ts
+++ b/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 参数:', {
- strokesCount: strokes.length,
- uptoInclusive,
- offsetX,
- offsetY,
- size,
- padding,
- contentSize,
- contentOffsetX,
- contentOffsetY,
- originalScale: scale,
- contentScale,
- fillStyle,
- strokeStyle,
- lineWidth
- });
+ // console.log('drawStrokes 参数:', {
+ // strokesCount: strokes.length,
+ // uptoInclusive,
+ // offsetX,
+ // offsetY,
+ // size,
+ // padding,
+ // contentSize,
+ // contentOffsetX,
+ // contentOffsetY,
+ // originalScale: scale,
+ // contentScale,
+ // fillStyle,
+ // strokeStyle,
+ // 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) {
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;
-
- // 计算实际需要的行数
- console.log('actualRows----:', actualRows)
- console.log('totalCellsNeeded----:', totalCellsNeeded)
- console.log('maxPerRow----:', maxPerRow)
+ const totalCellsNeeded = rowNumber * columnNumber;
// 动态调整间距以充分利用空间（在允许的最小间距基础上弹性扩展以适配画布）
- const actualRowGap = actualRows > 1 ? (contentHeight - actualRows * cellSize) / (actualRows - 1) : 0;
- const actualColGap = maxPerRow > 1 ? (contentWidth - maxPerRow * cellSize) / (maxPerRow - 1) : 0;
+ const actualRowGap = rowNumber > 1 ? (contentHeight - rowNumber * cellSize) / (rowNumber - 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,
- maxRows: actualRows
+ rowNumber,
+ columnNumber
});
- // 第二阶段：绘制练字内容
- this.drawPracticeContent({
- ctx,
- wordsMap,
- startX: leftMargin,
- startY: contentTop,
- cellSize,
- colGap: actualColGap,
- rowGap: actualRowGap,
- maxPerRow
- });
+ if (characters.length > 0) {
+ // 第二阶段：绘制练字内容
+ this.drawPracticeContent({
+ ctx,
+ wordsMap,
+ startX: leftMargin,
+ startY: contentTop,
+ cellSize,
+ colGap: actualColGap,
+ rowGap: actualRowGap,
+ columnNumber
+ });
+ };
}
/**
@@ -444,8 +439,8 @@ class WordDrawService {
cellSize,
colGap,
rowGap,
- maxPerRow,
- maxRows
+ rowNumber,
+ columnNumber
}: {
ctx: RenderingContext;
startX: number;
@@ -453,12 +448,12 @@ class WordDrawService {
cellSize: number;
colGap: number;
rowGap: number;
- maxPerRow: number;
- maxRows: number;
+ rowNumber: number; // 行数
+ columnNumber: number; // 列数
}) {
console.log('drawEmptyGrids startY----:', startY)
- for (let row = 0; row < maxRows; row++) {
- for (let col = 0; col < maxPerRow; col++) {
+ for (let row = 0; row < rowNumber; row++) {
+ 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;
@@ -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) => {
- const strokes = wordsMap[char] || [];
+ characters.forEach((uniqueKey, charIndex) => {
+ 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,
- cellIndex
+ rowIndex,
});
- cellIndex++;
+ columnIndex++;
// 2. 练习格：逐笔画显示（红色）
for (let strokeIndex = 0; strokeIndex < strokeCount; strokeIndex++) {
@@ -525,29 +522,30 @@ class WordDrawService {
cellSize,
colGap,
rowGap,
- maxPerRow,
- cellIndex
+ rowIndex,
+ columnIndex
});
- cellIndex++;
-
- console.log(`笔画 ${strokeIndex + 1} 绘制完成，当前 cellIndex: ${cellIndex}`);
+ columnIndex++;
+ if (columnIndex >= columnNumber) {
+ 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);
- const nextRow = currentRow + 1;
- cellIndex = nextRow * maxPerRow;
- console.log(`汉字 "${char}" 绘制完成，强制换行到新行，下一个汉字从 cellIndex: ${cellIndex} 开始`);
- } else {
- console.log(`汉字 "${char}" 绘制完成，这是最后一个汉字`);
+ rowIndex = rowIndex + 1;
+ columnIndex = 0;
+ // console.log(`汉字 "${char}" 绘制完成，强制换行到新行，下一个汉字从 rowIndex: ${rowIndex}, columnIndex: ${columnIndex} 开始`);
}
});
- console.log('所有汉字绘制完成');
+ // console.log('所有汉字绘制完成');
}
/**
@@ -561,8 +559,7 @@ class WordDrawService {
cellSize,
colGap,
rowGap,
- maxPerRow,
- cellIndex
+ rowIndex
}: {
ctx: RenderingContext;
strokes: string[];
@@ -571,15 +568,13 @@ class WordDrawService {
cellSize: number;
colGap: number;
rowGap: number;
- maxPerRow: number;
- cellIndex: number;
+ rowIndex: number;
}) {
- const row = Math.floor(cellIndex / maxPerRow);
- const col = cellIndex % maxPerRow;
- const x = startX + col * (cellSize + colGap);
- const y = startY + row * (cellSize + rowGap);
+ const columnIndex = 0;
+ const x = startX + columnIndex * (cellSize + colGap);
+ const y = startY + rowIndex * (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,
- cellIndex
+ rowIndex,
+ columnIndex
}: {
ctx: RenderingContext;
strokes: string[];
@@ -618,15 +613,13 @@ class WordDrawService {
cellSize: number;
colGap: number;
rowGap: number;
- maxPerRow: number;
- cellIndex: number;
+ rowIndex: number;
+ columnIndex: number;
}) {
- const row = Math.floor(cellIndex / maxPerRow);
- const col = cellIndex % maxPerRow;
- const x = startX + col * (cellSize + colGap);
- const y = startY + row * (cellSize + rowGap);
+ const x = startX + columnIndex * (cellSize + colGap);
+ const y = startY + rowIndex * (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;