R524809
406 lines
13 KiB
TypeScript
406 lines
13 KiB
TypeScript
import WordDrawService from '../../service/wordDrawService';
|
|
import { checkAndSaveImage } from '../../utils/saveImage';
|
|
import { shouldShowShareGuide } from '../../utils/shareGuide';
|
|
import { PAPER_SIZE } from '../../constants/colors';
|
|
import { getWordsSvgData } from '../../utils/getWordsSvgJson';
|
|
import { WORDS } from '../../constants/words';
|
|
import { CharacterItem } from '../../types/characterType';
|
|
import tracker from '../../utils/tracker';
|
|
|
|
Page({
|
|
canvas: null as Canvas | null,
|
|
ctx: null as RenderingContext | null,
|
|
wordDrawService: null as WordDrawService | null,
|
|
svgWords: {} as Record<string, string[]>,
|
|
maxRow: 0 as number,
|
|
maxCol: 0 as number,
|
|
|
|
data: {
|
|
// 选中的汉字列表
|
|
words: [] as string[],
|
|
showSelectWordPopup: false,
|
|
showColorPopup: false,
|
|
currentKey: 0,
|
|
currentColor: '',
|
|
boxWidth: 0,
|
|
boxHeight: 0,
|
|
showShareDialog: false, // 显示分享引导弹窗
|
|
},
|
|
|
|
async onLoad() {
|
|
await this.loadSvgWords();
|
|
const hasShowPracticeDemo =
|
|
wx.getStorageSync('hasShowPracticeDemo') || false;
|
|
if (!hasShowPracticeDemo) {
|
|
this.setData(
|
|
{
|
|
words: ['好', '好', '学', '习', '天', '天', '向', '上'],
|
|
},
|
|
() => {
|
|
wx.setStorageSync('hasShowPracticeDemo', true);
|
|
},
|
|
);
|
|
}
|
|
await this.setCanvasBoxSize();
|
|
await this.initCanvas();
|
|
},
|
|
|
|
async loadSvgWords() {
|
|
try {
|
|
wx.showToast({ title: '加载字体中...', icon: 'loading' });
|
|
// 使用带缓存的SVG汉字数据获取函数
|
|
const svgWordsData = await getWordsSvgData();
|
|
|
|
this.svgWords = svgWordsData;
|
|
wx.hideToast();
|
|
|
|
console.log(
|
|
'SVG汉字数据加载成功，共',
|
|
Object.keys(this.svgWords).length,
|
|
'个汉字',
|
|
);
|
|
|
|
const { words } = this.data as any;
|
|
if (words && words.length > 0) {
|
|
this.renderPracticeContent().catch(console.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('加载SVG汉字数据失败:', error);
|
|
wx.hideToast();
|
|
|
|
// 显示错误提示
|
|
wx.showModal({
|
|
title: '加载失败',
|
|
content: '无法加载汉字数据，请检查网络连接后重试',
|
|
showCancel: true,
|
|
cancelText: '取消',
|
|
confirmText: '重试',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 用户点击重试，重新加载
|
|
this.loadSvgWords();
|
|
}
|
|
},
|
|
});
|
|
}
|
|
},
|
|
|
|
// 输入组件回调
|
|
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. 解析新输入的汉字
|
|
const newChars = this.splitToSingleChars(text);
|
|
if (newChars.length === 0) {
|
|
wx.showToast({ title: '请输入有效汉字', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
// 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.renderPracticeContent().catch(console.error);
|
|
});
|
|
|
|
// 5. 显示添加结果提示
|
|
wx.showToast({
|
|
title: `成功添加 ${newChars.length} 个汉字`,
|
|
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 }, () => {
|
|
if (newWords && newWords.length > 0) {
|
|
this.renderPracticeContent().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);
|
|
this.setData({ words: next }, () =>
|
|
this.renderPracticeContent().catch(console.error),
|
|
);
|
|
},
|
|
|
|
// 清空
|
|
clearWords() {
|
|
this.setData({ words: [] }, () =>
|
|
this.renderPracticeContent().catch(console.error),
|
|
);
|
|
},
|
|
|
|
// 随机生成（取基础分类，过滤为可用SVG字，最多11个）
|
|
refreshWords() {
|
|
// 选取较简单的几个分类（如 0:基础独体字，1:生活高频字，2:自然与动作）
|
|
const candidate = WORDS.slice(0, 3).reduce(
|
|
(acc: string[], c: any) => acc.concat(c.words),
|
|
[] as string[],
|
|
);
|
|
// 去重
|
|
const unique = Array.from(new Set(candidate));
|
|
// 打乱
|
|
const shuffled = unique.sort(() => Math.random() - 0.5);
|
|
// 先取前 11 个
|
|
const picked = shuffled.slice(0, 10);
|
|
// 过滤为支持的SVG字
|
|
const supported = this.getSupportedWords(picked);
|
|
if (supported.length === 0) {
|
|
wx.showToast({
|
|
title: '随机到的字暂不支持，重试一下',
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
}
|
|
this.setData({ words: supported }, () =>
|
|
this.renderPracticeContent().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();
|
|
},
|
|
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,
|
|
);
|
|
|
|
// 初始化时只绘制页眉和布局
|
|
await this.wordDrawService.drawLayout();
|
|
|
|
// 绘制完成后计算并缓存最大行列数（与实际绘制一致）
|
|
const { maxRow, maxCol } =
|
|
this.wordDrawService.getMaxGridLayout();
|
|
this.maxRow = maxRow;
|
|
this.maxCol = maxCol;
|
|
|
|
// 如果有汉字数据，绘制练字内容
|
|
const { words } = this.data as any;
|
|
if (words && words.length > 0) {
|
|
await this.renderPracticeContent();
|
|
}
|
|
|
|
resolve();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
// 绘制练字内容（只绘制田字格和汉字内容）
|
|
async renderPracticeContent() {
|
|
if (!this.canvas || !this.wordDrawService) {
|
|
await this.initCanvas();
|
|
return;
|
|
}
|
|
|
|
const { words } = this.data as any;
|
|
|
|
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;
|
|
}
|
|
|
|
// 使用初始化阶段缓存的最大行列数；若未初始化则计算一次并缓存
|
|
let maxRow = this.maxRow;
|
|
let maxCol = this.maxCol;
|
|
if (!maxRow || !maxCol) {
|
|
const layout = this.wordDrawService!.getMaxGridLayout();
|
|
this.maxRow = layout.maxRow;
|
|
this.maxCol = layout.maxCol;
|
|
maxRow = layout.maxRow;
|
|
maxCol = layout.maxCol;
|
|
}
|
|
|
|
// 处理布局和生成练字数据（基于实际最大行列数）
|
|
const characterData = this.processCharacterLayout(
|
|
supportedWords,
|
|
maxRow,
|
|
maxCol,
|
|
);
|
|
this.wordDrawService.drawPracticeContent(characterData);
|
|
},
|
|
|
|
/** 检查汉字是否支持，返回支持的汉字列表 */
|
|
getSupportedWords(words: string[]): string[] {
|
|
return words.filter((word) => this.svgWords[word]);
|
|
},
|
|
|
|
/** 处理汉字布局，生成练字数据 */
|
|
processCharacterLayout(
|
|
words: string[],
|
|
maxRow: number,
|
|
maxCol: number,
|
|
): CharacterItem[] {
|
|
let rowIndex = 0;
|
|
const characterData: CharacterItem[] = [];
|
|
const boundaryWords: string[] = [];
|
|
|
|
// 按顺序处理每个汉字
|
|
words.forEach((word: string) => {
|
|
const strokes = this.svgWords[word];
|
|
const strokeCount = strokes.length;
|
|
const totalCells = 1 + strokeCount + 0; // 预览格 + 练习格 + 空白格
|
|
const totalRows = Math.ceil(totalCells / maxCol);
|
|
|
|
// 这里的意思是：把这一个汉字所占的行数（totalRows）累加到 rowIndex 上。
|
|
// 这样 rowIndex 就记录了当前已经排布了多少行，用于判断是否超出了最大允许行数（maxRow）。
|
|
rowIndex = rowIndex + totalRows;
|
|
|
|
if (rowIndex <= maxRow) {
|
|
characterData.push({ character: word, strokes });
|
|
} else {
|
|
boundaryWords.push(word);
|
|
}
|
|
});
|
|
// // 提示超出页面的汉字
|
|
// if (showToast && boundaryWords.length > 0) {
|
|
// wx.showToast({
|
|
// title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`,
|
|
// icon: 'none'
|
|
// });
|
|
// }
|
|
|
|
return characterData;
|
|
},
|
|
|
|
/** 记录待下载状态（当需要分享引导时） */
|
|
pendingDownload: false,
|
|
|
|
// 下载打印练字贴
|
|
exportToPrint() {
|
|
if (!this.canvas) {
|
|
wx.showToast({ title: '请先生成练字贴', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
// 检查是否需要显示分享引导
|
|
if (shouldShowShareGuide()) {
|
|
this.setData({ showShareDialog: true });
|
|
return;
|
|
}
|
|
|
|
// 上报下载埋点
|
|
tracker.reportDownload('练字贴');
|
|
|
|
// 直接下载
|
|
checkAndSaveImage(this.canvas);
|
|
},
|
|
|
|
/** 关闭分享引导弹窗 */
|
|
onCloseShareDialog() {
|
|
this.setData({ showShareDialog: false });
|
|
},
|
|
|
|
// 分享功能
|
|
onShareAppMessage() {
|
|
// 上报分享埋点
|
|
tracker.reportShare('练字贴');
|
|
|
|
return {
|
|
title: '涂鸦丫-涂色｜练字|识字|打印',
|
|
path: '/pages/copyBook/copyBook',
|
|
imageUrl:
|
|
'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
|
};
|
|
},
|
|
onShareTimeline() {
|
|
// 上报分享埋点
|
|
tracker.reportShare('练字贴');
|
|
|
|
return {
|
|
title: '涂鸦丫-涂色｜练字|识字|打印',
|
|
query: '/pages/copyBook/copyBook',
|
|
imageUrl:
|
|
'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
|
};
|
|
},
|
|
|
|
/** 分享成功回调（由组件触发） */
|
|
onShareSuccess() {
|
|
// 只关闭弹窗，不触发下载
|
|
this.setData({ showShareDialog: false });
|
|
},
|
|
});
|