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-30 18:21:38 +08:00
parent c4f27f2125
commit 2e0f8f0fe1
19 changed files with 450 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/copyBook/copyBook.json
+2 -1
View File
@@ -9,6 +9,7 @@
"van-icon": "@vant/weapp/icon/index",
"word-input": "/components/word-input/word-input",
"word-card": "/components/word-card/word-card",
"word-picker": "/components/word-picker/word-picker"
"word-picker": "/components/word-picker/word-picker",
"empty-state": "/components/empty-state/empty-state"
}
}
miniprogram/pages/copyBook/copyBook.less
+6 -42
View File
@@ -32,48 +32,6 @@ page {
.word-card-box {
padding: 34rpx 0;
.word-list-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60rpx 40rpx;
text-align: center;
.empty-icon {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32rpx;
box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
.toy-icon {
font-size: 48rpx;
color: #3b82f6;
}
}
.empty-title {
font-size: 32rpx;
font-weight: 600;
color: #374151;
margin-bottom: 16rpx;
line-height: 1.4;
}
.empty-desc {
font-size: 26rpx;
color: #6b7280;
line-height: 1.6;
margin-bottom: 32rpx;
max-width: 400rpx;
}
}
.word-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -86,6 +44,12 @@ page {
flex-direction: row;
justify-content: space-between;
}
.operation-box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.tianzige {
miniprogram/pages/copyBook/copyBook.ts
+66 -34
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 { WORDS } from '../../constants/words';
import { CharacterItem } from '../../types/characterType';
Page({
@@ -9,6 +10,8 @@ Page({
ctx: null as RenderingContext | null,
wordDrawService: null as WordDrawService | null,
svgWords: {} as Record<string, string[]>,
maxRow: 0 as number,
maxCol: 0 as number,
data: {
// 选中的汉字列表
@@ -21,18 +24,17 @@ Page({
boxHeight: 0,
},
onLoad() {
this.loadSvgWords();
const hasShowIntroduction =
wx.getStorageSync('hasShowIntroduction') || false;
if (!hasShowIntroduction) {
async onLoad() {
await this.loadSvgWords();
const hasShowPracticeDemo =
wx.getStorageSync('hasShowPracticeDemo') || false;
if (!hasShowPracticeDemo) {
this.setData({
words: ['好', '好', '学', '习', '天', '天', '向', '上']
}, () => {
wx.setStorageSync('hasShowPracticeDemo', true);
})
}
},
async onReady() {
await this.setCanvasBoxSize();
await this.initCanvas()
},
@@ -40,12 +42,9 @@ Page({
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();
@@ -147,6 +146,30 @@ Page({
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]+$/;
@@ -189,16 +212,16 @@ Page({
if (ctx) {
this.canvas = canvas;
this.ctx = ctx;
this.wordDrawService = new WordDrawService(canvas, ctx, {
appName: '涂鸦丫小程序',
appHint: '练字|识字|涂色｜打印',
title: '田字格 练 字 贴',
subTitle: '按笔画临摹练习'
});
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) {
@@ -220,7 +243,6 @@ Page({
}
const { words } = this.data as any;
console.log("renderPracticeContent words", words);
if (!words || words.length === 0) {
this.wordDrawService.drawContentEmpty();
@@ -235,8 +257,19 @@ Page({
return;
}
// 处理布局和生成练字数据
const characterData = this.processCharacterLayout(supportedWords);
// 使用初始化阶段缓存的最大行列数；若未初始化则计算一次并缓存
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);
},
@@ -247,8 +280,7 @@ Page({
},
/** 处理汉字布局，生成练字数据 */
processCharacterLayout(words: string[]): CharacterItem[] {
const maxRow = 11, maxCol = 9;
processCharacterLayout(words: string[], maxRow: number, maxCol: number): CharacterItem[] {
let rowIndex = 0;
const characterData: CharacterItem[] = [];
const boundaryWords: string[] = [];
@@ -257,10 +289,12 @@ Page({
words.forEach((word: string) => {
const strokes = this.svgWords[word];
const strokeCount = strokes.length;
const totalCells = 1 + strokeCount + 2; // 预览格 + 练习格 + 空白格
const totalCells = 1 + strokeCount + 0; // 预览格 + 练习格 + 空白格
const totalRows = Math.ceil(totalCells / maxCol);
rowIndex += totalRows;
// 这里的意思是：把这一个汉字所占的行数（totalRows）累加到 rowIndex 上。
// 这样 rowIndex 就记录了当前已经排布了多少行，用于判断是否超出了最大允许行数（maxRow）。
rowIndex = rowIndex + totalRows;
if (rowIndex <= maxRow) {
characterData.push({ character: word, strokes });
@@ -268,22 +302,20 @@ Page({
boundaryWords.push(word);
}
});
// 提示超出页面的汉字
if (boundaryWords.length > 0) {
wx.showToast({
title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`,
icon: 'none'
});
}
// // 提示超出页面的汉字
// if (showToast && boundaryWords.length > 0) {
// wx.showToast({
// title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`,
// icon: 'none'
// });
// }
return characterData;
},
// 下载打印练字贴
exportToPrint() {
const { words } = this.data as any;
if (!this.canvas || words.length <= 0) {
if (!this.canvas) {
wx.showToast({ title: '请先生成练字贴', icon: 'none' });
return;
}
miniprogram/pages/copyBook/copyBook.wxml
+25 -11
View File
@@ -1,6 +1,6 @@
<view class="page-container">
<view class="wrapper">
<text class="wrapper-title">自定义练字</text>
<text class="wrapper-title">自定义练字贴</text>
<view class="word-input-box">
<word-input bind:onConfirm="onConfirmInput" width="410rpx" />
<toy-button
@@ -24,15 +24,30 @@
bind:onDelete="deleteWordCard"
bind:onColorTap="onColorTap" />
</view>
<view class="word-list-empty" wx:if="{{!words.length}}">
<view class="empty-icon">
<text class="toy-icon toy-icon-translate"></text>
</view>
<view class="empty-title">还没有添加文字</view>
<view class="empty-desc"
>请在上方输入文字或点击"选择文字"按钮<br />开始创建你的练字田字格吧！</view
>
</view>
<empty-state
wx:if="{{!words.length}}"
title="还没有添加文字"
desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的练字田字格吧！"
hint="提示：最多可以同时添加 11 个文字" />
</view>
<view class="operation-box">
<toy-button
type="primary"
bind:click="refreshWords"
width="410rpx"
icon="refresh"
icon-class-prefix="toy-icon">
随机生成
</toy-button>
<toy-button
disabled="{{words.length <= 0}}"
type="white"
bind:click="clearWords"
width="200rpx"
icon="clear"
icon-class-prefix="toy-icon">
清空
</toy-button>
</view>
</view>
@@ -65,7 +80,6 @@
bind:click="exportToPrint"
width="420rpx"
height="80rpx"
disabled="{{words.length <= 0}}"
icon="download"
icon-class-prefix="toy-icon">
下载打印
miniprogram/pages/index/index.json
+2 -1
View File
@@ -13,6 +13,7 @@
"color-picker": "../../components/color-picker/color-picker",
"introduction-popup": "../../components/introduction-popup/introduction-popup",
"toy-button": "../../ui/button/button",
"word-picker": "../../components/word-picker/word-picker"
"word-picker": "../../components/word-picker/word-picker",
"empty-state": "../../components/empty-state/empty-state"
}
}
miniprogram/pages/index/index.less
+3 -76
View File
@@ -34,73 +34,7 @@ page {
}
.word-card-box {
padding: 38rpx 0;
.word-list-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60rpx 40rpx;
text-align: center;
.empty-icon {
width: 120rpx;
height: 120rpx;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32rpx;
box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
.toy-icon {
font-size: 48rpx;
color: #3b82f6;
}
}
.empty-title {
font-size: 32rpx;
font-weight: 600;
color: #374151;
margin-bottom: 16rpx;
line-height: 1.4;
}
.empty-desc {
font-size: 26rpx;
color: #6b7280;
line-height: 1.6;
margin-bottom: 32rpx;
max-width: 400rpx;
}
.empty-hint {
display: flex;
align-items: center;
background: #f8fafc;
border: 1rpx solid #e2e8f0;
border-radius: 12rpx;
padding: 20rpx 24rpx;
max-width: 500rpx;
.hint-icon {
font-size: 24rpx;
margin-right: 12rpx;
margin-top: -2rpx;
flex-shrink: 0;
}
.hint-text {
font-size: 22rpx;
color: #64748b;
line-height: 1.5;
text-align: left;
}
}
}
padding: 34rpx 0;
.word-cards-grid {
display: grid;
@@ -122,7 +56,7 @@ page {
}
// 模板选择区域
.template-section {
/* .template-section {
margin-top: 40rpx;
.template-title {
@@ -292,14 +226,7 @@ page {
}
}
}
}
}
.operation-box {
display: flex;
flex-direction: row;
justify-content: space-between;
} */
}
miniprogram/pages/index/index.ts
+2
View File
@@ -48,6 +48,8 @@ Page({
selectedWords: ['涂', '鸦', '丫', '欢', '迎', '您'],
showIntroductionPopup: true,
env: getApp().globalData.env || 'release',
}, () => {
this.drawCanvas();
});
} else {
this.setData({
miniprogram/pages/index/index.wxml
+8 -18
View File
@@ -24,21 +24,11 @@
bind:onDelete="deleteWordCard"
bind:onColorTap="onColorTap" />
</view>
<view class="word-list-empty" wx:if="{{!cardList.length}}">
<view class="empty-icon">
<text class="toy-icon toy-icon-translate"></text>
</view>
<view class="empty-title">还没有添加文字</view>
<view class="empty-desc"
>请在上方输入文字或点击"选择文字"按钮<br />开始创建你的涂鸦卡吧！</view
>
<view class="empty-hint">
<text class="hint-icon">💡</text>
<text class="hint-text"
>提示：最多可以同时添加六个文字</text
>
</view>
</view>
<empty-state
wx:if="{{!cardList.length}}"
title="还没有添加文字"
desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的涂鸦卡吧！"
hint="提示：最多可以同时添加 6 个文字" />
</view>
<view class="operation-box">
<toy-button
@@ -61,7 +51,7 @@
</view>
<!-- 趣味模板选择区域 -->
<view class="template-section">
<!-- <view class="template-section">
<view class="template-title">选择涂色模板</view>
<view class="template-grid">
<view
@@ -153,7 +143,7 @@
<view class="template-name">直线排列</view>
</view>
</view>
</view>
</view> -->
</view>
<view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
<text class="wrapper-title">预览打印效果</text>
@@ -179,7 +169,7 @@
bind:onChange="onChangeColor" />
<word-picker
show="{{showSelectWordPopup}}"
selectedWords="{{cardList}}"
cardList="{{cardList}}"
bind:onClose="closeSelectWordPopup"
bind:onChange="onChangeWord" />
</view>