joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:修改练习字帖生产逻辑

Browse Source
This commit is contained in:
R524809
2025-10-29 17:45:12 +08:00
parent 643a7e23e7
commit c4f27f2125
13 changed files with 141224 additions and 60061 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/copyBook/copyBook.ts
+116 -118
View File
@@ -2,6 +2,7 @@ import WordDrawService from '../../service/wordDrawService';
import { checkAndSaveImage } from '../../utils/saveImage';
import { PAPER_SIZE } from '../../constants/colors';
import { getWordsSvgData } from '../../utils/getWordsSvgJson';
import { CharacterItem } from '../../types/characterType';
Page({
canvas: null as Canvas | null,
@@ -33,16 +34,18 @@ Page({
async onReady() {
await this.setCanvasBoxSize();
this.initCanvas()
await this.initCanvas()
},
async loadSvgWords() {
try {
wx.showToast({ title: '加载字体中...', icon: 'loading' });
console.log("loadSvgWords");
// 使用带缓存的SVG汉字数据获取函数
const svgWordsData = await getWordsSvgData();
console.log("svgWordsData", svgWordsData);
this.svgWords = svgWordsData;
wx.hideToast();
@@ -50,7 +53,7 @@ Page({
const { words } = this.data as any;
if (words && words.length > 0) {
this.drawPracticeSheet().catch(console.error);
this.renderPracticeContent().catch(console.error);
}
} catch (error) {
console.error('加载SVG汉字数据失败:', error);
@@ -86,73 +89,37 @@ Page({
const { words } = this.data as any;
// 1. 先检查原来已有的汉字是否超过11个
if (words.length >= 11) {
wx.showToast({
title: '最多只能添加 11 个字哦！',
icon: 'none',
duration: 2000,
});
return;
}
// 2. 解析新输入的汉字
// 1. 解析新输入的汉字
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++;
// 2. 检查是否超过限制
if (words.length + newChars.length > 11) {
wx.showToast({
title: `最多只能添加 11 个字，当前已有 ${words.length} 个，输入了 ${newChars.length} 个`,
icon: 'none',
duration: 3000,
});
return;
}
// 3. 直接追加新汉字
const updatedWords = [...words, ...newChars];
// 4. 更新数据并提示
this.setData({ words: updatedWords }, () => {
this.drawPracticeSheet().catch(console.error);
this.renderPracticeContent().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,
});
}
wx.showToast({
title: `成功添加 ${newChars.length} 个汉字`,
icon: 'none',
duration: 2000,
});
},
// 选择面板
@@ -165,7 +132,11 @@ Page({
onChangeWord(e: any) {
const selectedWords = e.detail.selectedWords as string[];
const newWords = [...this.data.words, ...selectedWords];
this.setData({ words: newWords, showSelectWordPopup: false }, () => this.drawPracticeSheet().catch(console.error));
this.setData({ words: newWords, showSelectWordPopup: false }, () => {
if (newWords && newWords.length > 0) {
this.renderPracticeContent().catch(console.error);
}
});
},
// 删除
@@ -173,8 +144,7 @@ Page({
const { key } = e.detail;
const { words } = this.data as any;
const next = words.filter((_: string, index: number) => index !== key);
console.log("-nextnext-----:", next);
this.setData({ words: next }, () => this.drawPracticeSheet().catch(console.error));
this.setData({ words: next }, () => this.renderPracticeContent().catch(console.error));
},
// 校验 & 分割
@@ -188,6 +158,7 @@ Page({
return matches || [];
},
setCanvasBoxSize() {
const query = wx.createSelectorQuery();
query
@@ -202,86 +173,113 @@ Page({
})
.exec();
},
initCanvas() {
// 然后初始化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.wordDrawService = new WordDrawService(canvas, ctx, {
appName: '涂鸦丫小程序',
appHint: '练字|识字|涂色｜打印',
title: '田字格 练 字 贴',
subTitle: '按笔画临摹练习'
});
this.drawPracticeSheet().catch(console.error);
async initCanvas() {
return new Promise<void>((resolve) => {
// 然后初始化canvas
wx.createSelectorQuery()
.select('#canvasContent')
.fields({
node: true,
size: true,
})
.exec(async (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.wordDrawService = new WordDrawService(canvas, ctx, {
appName: '涂鸦丫小程序',
appHint: '练字|识字|涂色｜打印',
title: '田字格 练 字 贴',
subTitle: '按笔画临摹练习'
});
// 初始化时只绘制页眉和布局
await this.wordDrawService.drawLayout();
// 如果有汉字数据，绘制练字内容
const { words } = this.data as any;
if (words && words.length > 0) {
await this.renderPracticeContent();
}
resolve();
}
}
}
});
});
});
},
// 绘制练字贴
async drawPracticeSheet() {
// 绘制练字内容（只绘制田字格和汉字内容）
async renderPracticeContent() {
if (!this.canvas || !this.wordDrawService) {
this.initCanvas();
await this.initCanvas();
return;
}
const { words } = this.data as any;
// 构建汉字笔画数据
const wordsMap: Record<string, string[]> | null = this.checkWords(words);
await this.wordDrawService?.draw(wordsMap || {});
console.log("renderPracticeContent words", words);
if (!words || words.length === 0) {
this.wordDrawService.drawContentEmpty();
return;
}
// 检查汉字是否支持
const supportedWords = this.getSupportedWords(words);
if (supportedWords.length === 0) {
wx.showToast({ title: '暂不支持这些汉字', icon: 'none' });
this.wordDrawService.drawContentEmpty();
return;
}
// 处理布局和生成练字数据
const characterData = this.processCharacterLayout(supportedWords);
this.wordDrawService.drawPracticeContent(characterData);
},
checkWords(words: string[]): Record<string, string[]> | null {
// 构建汉字笔画数据（已去重）
const wordsMap: Record<string, string[]> = {};
const supportedWords: string[] = [];
/** 检查汉字是否支持，返回支持的汉字列表 */
getSupportedWords(words: string[]): string[] {
return words.filter(word => this.svgWords[word]);
},
/** 处理汉字布局，生成练字数据 */
processCharacterLayout(words: string[]): CharacterItem[] {
const maxRow = 11, maxCol = 9;
let rowIndex = 0;
const characterData: CharacterItem[] = [];
const boundaryWords: string[] = [];
// 按顺序处理每个汉字
words.forEach((word: string) => {
if (this.svgWords[word]) {
wordsMap[word] = this.svgWords[word];
supportedWords.push(word);
}
});
if (supportedWords.length === 0) {
wx.showToast({ title: '暂不支持这些汉字', icon: 'none' });
return null;
}
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 strokes = this.svgWords[word];
const strokeCount = strokes.length;
const totalCells = 1 + strokeCount + 2;
const totalCells = 1 + strokeCount + 2; // 预览格 + 练习格 + 空白格
const totalRows = Math.ceil(totalCells / maxCol);
rowIndex += totalRows;
if (rowIndex <= maxRow) {
newWorksMap[char] = wordsMap[char];
characterData.push({ character: word, strokes });
} else {
boundaryWords.push(char)
boundaryWords.push(word);
}
});
// 提示超出页面的汉字
if (boundaryWords.length > 0) {
wx.showToast({ title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`, icon: 'none' });
wx.showToast({
title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`,
icon: 'none'
});
}
return newWorksMap;
return characterData;
},
// 下载打印练字贴
exportToPrint() {
const { words } = this.data as any;
miniprogram/pages/copyBook/copyBook.wxml
+1
View File
@@ -20,6 +20,7 @@
wx:for-item="word"
wx:for-index="index"
word="{{word}}"
key="{{index}}"
bind:onDelete="deleteWordCard"
bind:onColorTap="onColorTap" />
</view>