R524809
300 lines
9.6 KiB
TypeScript
300 lines
9.6 KiB
TypeScript
import WordDrawService from '../../service/wordDrawService';
|
|
import { checkAndSaveImage } from '../../utils/saveImage';
|
|
import { PAPER_SIZE } from '../../constants/colors';
|
|
|
|
Page({
|
|
canvas: null as Canvas | null,
|
|
ctx: null as RenderingContext | null,
|
|
wordDrawService: null as WordDrawService | null,
|
|
svgWords: {} as Record<string, string[]>,
|
|
|
|
data: {
|
|
// 选中的汉字列表
|
|
words: [] as string[],
|
|
showSelectWordPopup: false,
|
|
showColorPopup: false,
|
|
currentKey: 0,
|
|
currentColor: '',
|
|
boxWidth: 0,
|
|
boxHeight: 0,
|
|
},
|
|
|
|
onLoad() {
|
|
this.loadSvgWords();
|
|
const hasShowIntroduction =
|
|
wx.getStorageSync('hasShowIntroduction') || false;
|
|
if (!hasShowIntroduction) {
|
|
this.setData({
|
|
words: ['好', '好', '学', '习', '天', '天', '向', '上']
|
|
})
|
|
}
|
|
},
|
|
|
|
async onReady() {
|
|
await this.setCanvasBoxSize();
|
|
this.initCanvas()
|
|
},
|
|
|
|
loadSvgWords() {
|
|
const fs = wx.getFileSystemManager();
|
|
fs.readFile({
|
|
filePath: 'constants/svgWords.json', // JSON文件路径，相对于项目根目录
|
|
encoding: 'utf8', // 重要：指定编码为utf8以读取文本内容
|
|
success: (res) => {
|
|
try {
|
|
wx.showToast({ title: '加载中...', icon: 'loading' });
|
|
const parsedData = JSON.parse(res.data as string);
|
|
this.svgWords = parsedData;
|
|
wx.hideToast();
|
|
const { words } = this.data as any;
|
|
if (words && words.length > 0) {
|
|
this.drawPracticeSheet().catch(console.error);
|
|
}
|
|
} catch (e) {
|
|
console.error('解析JSON失败', e);
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
console.error('读取文件失败', err);
|
|
wx.hideToast();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 输入组件回调
|
|
onConfirmInput(e: any) {
|
|
const value: string = (e && e.detail && e.detail.value) || '';
|
|
const text = (value || '').trim();
|
|
if (!text) return;
|
|
|
|
if (!this.isChineseText(text)) {
|
|
wx.showToast({ title: '请输入汉字', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
const { words } = this.data as any;
|
|
|
|
// 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);
|
|
});
|
|
|
|
// 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,
|
|
});
|
|
}
|
|
},
|
|
|
|
// 选择面板
|
|
openSelectWordPopup() {
|
|
this.setData({ showSelectWordPopup: true });
|
|
},
|
|
closeSelectWordPopup() {
|
|
this.setData({ showSelectWordPopup: false });
|
|
},
|
|
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));
|
|
},
|
|
|
|
// 删除
|
|
deleteWordCard(e: any) {
|
|
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));
|
|
},
|
|
|
|
// 校验 & 分割
|
|
isChineseText(text: string): boolean {
|
|
const chineseRegex = /^[\u4e00-\u9fff]+$/;
|
|
return chineseRegex.test(text);
|
|
},
|
|
splitToSingleChars(text: string): string[] {
|
|
const chineseRegex = /[\u4e00-\u9fff]/g;
|
|
const matches = text.match(chineseRegex);
|
|
return matches || [];
|
|
},
|
|
|
|
setCanvasBoxSize() {
|
|
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.setData({ boxWidth, boxHeight });
|
|
}
|
|
})
|
|
.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 drawPracticeSheet() {
|
|
if (!this.canvas || !this.wordDrawService) {
|
|
this.initCanvas();
|
|
}
|
|
const { words } = this.data as any;
|
|
// 构建汉字笔画数据
|
|
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[]> = {};
|
|
const supportedWords: 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 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;
|
|
if (!this.canvas || words.length <= 0) {
|
|
wx.showToast({ title: '请先生成练字贴', icon: 'none' });
|
|
return;
|
|
}
|
|
checkAndSaveImage(this.canvas);
|
|
},
|
|
|
|
// 分享功能
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '涂鸦丫-练字|识字|打印',
|
|
path: '/pages/copyBook/index',
|
|
};
|
|
},
|
|
|
|
onShareTimeline() {
|
|
return {
|
|
title: '涂鸦丫-练字|识字|打印',
|
|
query: '/pages/copyBook/index',
|
|
};
|
|
},
|
|
});
|
|
|
|
|