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/components/empty-state/empty-state.json
+4
View File
@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}
miniprogram/components/empty-state/empty-state.less
+67
View File
@@ -0,0 +1,67 @@
.word-list-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50rpx 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);
.empty-logo {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
}
.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: 480rpx;
}
}
.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;
}
}
miniprogram/components/empty-state/empty-state.ts
+10
View File
@@ -0,0 +1,10 @@
Component({
properties: {
title: { type: String, value: '' },
desc: { type: String, value: '' },
hint: { type: String, value: '' },
},
data: {},
methods: {},
});
miniprogram/components/empty-state/empty-state.wxml
+14
View File
@@ -0,0 +1,14 @@
<view class="word-list-empty">
<view class="empty-icon">
<image
class="empty-logo"
src="../../assets/imgs/doodle-logo.png"
mode="aspectFill"></image>
</view>
<view class="empty-title">{{title}}</view>
<view class="empty-desc">{{desc}}</view>
<view class="empty-hint" wx:if="{{hint}}">
<text class="hint-icon">💡</text>
<text class="hint-text">{{hint}}</text>
</view>
</view>
miniprogram/components/word-card/word-card.ts
+3 -1
View File
@@ -31,7 +31,9 @@ Component({
color: '',
},
lifetimes: {
attached() { },
// attached() {
// console.log('this.data:', this.data);
// },
},
/**
* 组件的方法列表
miniprogram/components/word-picker/word-picker.ts
+12 -2
View File
@@ -10,6 +10,10 @@ Component({
type: Boolean,
value: false,
},
cardList: {
type: Array,
value: [],
},
currentTab: {
type: Number,
value: 0,
@@ -31,14 +35,20 @@ Component({
},
lifetimes: {
ready() {
// 初始化同步一次 selectedWords，避免首次传入时未触发 observers 的情况
const list = (this.data as any).cardList || [];
if (Array.isArray(list) && list.length > 0) {
const selectedWords = list.map((item: any) => item.word);
this.setData({ selectedWords });
}
},
},
/* observers: {
observers: {
cardList(newVal: CardList) {
const selectedWords = newVal.map((item) => item.word);
this.setData({ selectedWords });
},
}, */
},
/**
* 组件的方法列表
*/
miniprogram/components/word-picker/word-picker.wxml
+1 -1
View File
@@ -30,7 +30,7 @@
wx:for="{{wordList}}"
wx:for-index="categoryIndex"
wx:key="categoryIndex"
title="{{wordList[categoryIndex].categoryName}}">
title="{{wordList[categoryIndex].icon}} {{wordList[categoryIndex].categoryName}}">
<view class="word-list-wrapper">
<view class="word-list">
<view
miniprogram/config/config.ts
+1 -1
View File
@@ -1,6 +1,6 @@
export default {
printHeader: {
header: 'LogoImage',
header: 'wechat',
appName: '涂鸦丫'
}
}
miniprogram/constants/words.ts
+130 -276
View File
@@ -1,59 +1,18 @@
// 为避免保存时的自动格式化将数组元素强制换行，保持紧凑展示
// prettier-ignore
export const WORDS = [
{
categoryId: 0,
icon: '🌟',
categoryName: '基础独体字',
words: [
'人',
'口',
'手',
'上',
'下',
'日',
'月',
'水',
'火',
'山',
'大',
'小',
'天',
'土',
'木',
'中',
'个',
'工',
'王',
'车',
'儿',
'女',
'子',
'门',
'马',
'牛',
'羊',
'米',
'衣',
'白',
'田',
'石',
'雨',
'电',
'云',
'花',
'草',
'叶',
'果',
'鸟',
'虫',
'鱼',
'头',
'目',
'耳',
'足',
'心',
'力',
'立',
'正',
'人', '口', '手', '上', '下', '日', '月', '水', '火', '山', '大', '小', '天', '土', '木',
'中', '个', '工', '王', '车', '儿', '女', '子', '门', '马', '牛', '羊', '米', '衣', '白',
'田', '石', '雨', '电', '云', '花', '草', '叶', '果', '鸟', '虫', '鱼', '头', '目', '耳',
'足', '心', '力', '立', '正',
// 扩充（常见基础字）
'刀', '又', '三', '四', '五', '六', '七', '八', '九', '十', '口', '门', '心', '耳', '目',
'牙', '鼻', '口', '眉', '田', '米', '木', '竹', '石', '土', '火', '水', '金'
],
},
{
@@ -61,113 +20,29 @@ export const WORDS = [
icon: '🏠',
categoryName: '生活高频字',
words: [
'爸',
'妈',
'爷',
'奶',
'哥',
'弟',
'姐',
'妹',
'书',
'包',
'尺',
'刀',
'本',
'笔',
'桌',
'灯',
'家',
'房',
'床',
'吃',
'喝',
'坐',
'走',
'跑',
'看',
'听',
'说',
'笑',
'哭',
'爱',
'好',
'有',
'来',
'去',
'开',
'关',
'里',
'外',
'多',
'少',
'红',
'黄',
'蓝',
'绿',
'白',
'黑',
'是',
'不',
'我',
'你',
'爸', '妈', '爷', '奶', '哥', '弟', '姐', '妹', '书', '包', '尺', '刀', '本', '笔', '桌',
'灯', '家', '房', '床', '吃', '喝', '坐', '走', '跑', '看', '听', '说', '笑', '哭', '爱',
'好', '有', '来', '去', '开', '关', '里', '外', '多', '少', '红', '黄', '蓝', '绿', '白',
'黑', '是', '不', '我', '你',
// 扩充（贴近生活）
'他', '她', '它', '们', '在', '和', '把', '给', '用', '做', '玩', '买', '卖', '学', '读',
'写', '问', '答', '听', '看', '吃', '喝', '睡', '起', '穿', '洗', '擦', '开', '关', '拿',
'放'
],
},
{
categoryId: 2,
icon: '',
icon: '🌿',
categoryName: '自然与动作',
words: [
'风',
'雪',
'星',
'光',
'林',
'河',
'海',
'沙',
'树',
'苗',
'春',
'夏',
'秋',
'冬',
'东',
'南',
'西',
'北',
'飞',
'跳',
'游',
'唱',
'画',
'洗',
'买',
'卖',
'问',
'学',
'读',
'写',
'早',
'晚',
'明',
'亮',
'高',
'长',
'圆',
'方',
'快',
'乐',
'热',
'冷',
'轻',
'重',
'新',
'旧',
'和',
'同',
'会',
'要',
'风', '雪', '星', '光', '林', '河', '海', '沙', '树', '苗', '春', '夏', '秋', '冬', '东',
'南', '西', '北', '飞', '跳', '游', '唱', '画', '洗', '买', '卖', '问', '学', '读', '写',
'早', '晚', '明', '亮', '高', '长', '圆', '方', '快', '乐', '热', '冷', '轻', '重', '新',
'旧', '和', '同', '会', '要',
// 扩充（自然与常见动作）
'雨', '雷', '电', '云', '雾', '露', '霜', '星', '月', '阳', '阴', '晴', '风', '雪', '冰',
'草', '花', '叶', '果', '根', '看', '听', '说', '读', '写', '跑', '跳', '走', '爬', '抓',
'推', '拉', '抱', '笑', '哭'
],
},
{
@@ -178,188 +53,167 @@ export const WORDS = [
},
{
categoryId: 4,
icon: '',
icon: '🔢',
categoryName: '数字',
words: [
'零',
'一',
'二',
'三',
'四',
'五',
'六',
'七',
'八',
'九',
'十',
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
'25',
'26',
'27',
'28',
'29',
'30',
'31',
'32',
'33',
'34',
'35',
'36',
'37',
'38',
'39',
'40',
'41',
'42',
'43',
'44',
'45',
'46',
'47',
'48',
'49',
'50',
'51',
'52',
'53',
'54',
'55',
'56',
'57',
'58',
'59',
'60',
'61',
'62',
'63',
'64',
'65',
'66',
'67',
'68',
'69',
'70',
'71',
'72',
'73',
'74',
'75',
'76',
'77',
'78',
'79',
'80',
'81',
'82',
'83',
'84',
'85',
'86',
'87',
'88',
'89',
'90',
'91',
'92',
'93',
'94',
'95',
'96',
'97',
'98',
'99',
'100'
'零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十',
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
'21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
'31', '32', '33', '34', '35', '36', '37', '38', '39', '40',
'41', '42', '43', '44', '45', '46', '47', '48', '49', '50',
'51', '52', '53', '54', '55', '56', '57', '58', '59', '60',
'61', '62', '63', '64', '65', '66', '67', '68', '69', '70',
'71', '72', '73', '74', '75', '76', '77', '78', '79', '80',
'81', '82', '83', '84', '85', '86', '87', '88', '89', '90',
'91', '92', '93', '94', '95', '96', '97', '98', '99', '100'
],
},
{
categoryId: 5,
icon: '🎨',
icon: '🔤',
categoryName: '字母',
words: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
words: [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
],
},
{
categoryId: 6,
icon: '☀️',
categoryName: '日字旁',
words: ['日', '明', '早', '时', '晴', '春', '星', '晨'],
words: ['日', '明', '早', '时', '晴', '春', '星', '晨', '晚', '晒', '照'],
},
{
categoryId: 7,
icon: '💧',
categoryName: '三点水',
words: ['水', '江', '河', '流', '沙', '洗', '海', '汗'],
words: ['水', '江', '河', '流', '沙', '洗', '海', '汗', '汽', '澡', '泡', '湖', '泉'],
},
{
categoryId: 8,
icon: '🐦',
categoryName: '鸟字边',
words: ['鸟', '鸡', '鸭', '鹅', '鸣', '鸽', '鸦'],
words: ['鸟', '鸡', '鸭', '鹅', '鸣', '鸽', '鸦', '鹊', '鹤'],
},
{
categoryId: 9,
icon: '🐾',
categoryName: '反犬旁',
words: ['狗', '猫', '猴', '狮', '狼', '猪'],
words: ['狗', '猫', '猴', '狮', '狼', '猪', '狠', '独', '犯'],
},
{
categoryId: 10,
icon: '🪱',
categoryName: '虫字旁',
words: ['虫', '蚁', '蝶', '蜻', '蛙', '蛇', '蜘', '蜂'],
words: ['虫', '蚁', '蝶', '蜻', '蛙', '蛇', '蜘', '蜂', '蚊', '蛾'],
},
{
categoryId: 11,
icon: '🌧️',
categoryName: '雨字头',
words: ['雨', '雪', '雷', '露', '雾', '雹', '霜'],
words: ['雨', '雪', '雷', '露', '雾', '雹', '霜', '雯', '霖'],
},
{
categoryId: 12,
icon: '🌲',
categoryName: '木字旁',
words: ['木', '林', '树', '桃', '森', '松', '桥', '枝'],
words: ['木', '林', '树', '桃', '森', '松', '桥', '枝', '板', '柜', '杯', '校'],
},
{
categoryId: 13,
icon: '👄',
categoryName: '口字旁',
words: ['口', '吃', '叫', '唱', '听', '吹', '叶', '和'],
words: ['口', '吃', '叫', '唱', '听', '吹', '叶', '和', '问', '品', '吐', '吸'],
},
{
categoryId: 14,
icon: '🧍',
categoryName: '单人旁',
words: ['你', '他', '们', '作', '休', '住', '伙', '伴'],
words: ['你', '他', '们', '作', '休', '住', '伙', '伴', '体', '位', '信', '化'],
},
{
categoryId: 15,
icon: '❤️',
categoryName: '竖心旁',
words: ['心', '情', '快', '怕', '惊', '忙', '怀'],
words: ['心', '情', '快', '怕', '惊', '忙', '怀', '爱', '想', '念'],
},
// 新增适龄分类
{
categoryId: 16,
icon: '🧭',
categoryName: '方位方向',
words: [
'上', '下', '左', '右', '前', '后', '里', '外', '东', '南', '西', '北', '中', '近', '远'
],
},
{
categoryId: 17,
icon: '🧑‍🦰',
categoryName: '身体部位',
words: [
'头', '脸', '目', '眼', '眉', '鼻', '口', '牙', '舌', '耳', '手', '指', '掌', '臂',
'足', '腿', '心'
],
},
{
categoryId: 18,
icon: '🐾',
categoryName: '常见动物',
words: [
'狗', '猫', '马', '牛', '羊', '鸡', '鸭', '鹅', '鱼', '兔', '猪', '熊', '虎', '鹿', '猴',
'狼', '狮', '虎', '豹', '象',
],
},
{
categoryId: 19,
icon: '🌼',
categoryName: '常见植物',
words: ['花', '草', '树', '叶', '果', '根', '竹', '松', '柳', '桃', '梅', '荷', '菊'],
},
{
categoryId: 20,
icon: '🍎',
categoryName: '食物饮品',
words: [
'米', '饭', '面', '菜', '果', '肉', '蛋', '奶', '糖', '盐', '油', '水', '茶', '汤',
'粥', '饼'
],
},
{
categoryId: 21,
icon: '🚗',
categoryName: '交通出行',
words: ['车', '船', '飞', '机', '站', '路', '桥', '铁', '轨', '轮'],
},
{
categoryId: 22,
icon: '📚',
categoryName: '校园与文具',
words: ['书', '本', '笔', '尺', '刀', '纸', '包', '课', '桌', '椅', '图', '画', '作', '业'],
},
{
categoryId: 23,
icon: '⏰',
categoryName: '时间与季节',
words: [
'日', '月', '年', '时', '分', '秒', '早', '晚', '今', '明', '昨', '春', '夏', '秋', '冬'
],
},
{
categoryId: 24,
icon: '🟠',
categoryName: '形状与图形',
words: ['点', '线', '面', '圆', '方', '角', '弧', '长', '宽', '高'],
},
{
categoryId: 25,
icon: '📏',
categoryName: '量词常用',
words: ['个', '只', '匹', '条', '朵', '棵', '片', '张', '本', '杯', '块', '双'],
},
];
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>
miniprogram/service/wordDrawService.ts
+91 -98
View File
@@ -231,7 +231,7 @@ class WordDrawService {
this.options = {
appName: '涂鸦丫小程序',
appHint: '识字|识图|练字|打印',
title: '田字格 练 字 贴',
title: '田字格 练 字 贴',
subTitle: '按笔画临摹练习',
...options,
};
@@ -260,6 +260,7 @@ class WordDrawService {
} else {
await this.drawMiniHeader();
}
this.drawContentEmpty();
}
async drawContentEmpty() {
@@ -345,10 +346,10 @@ class WordDrawService {
ctx.fillText(subTitle, 1015, 186);
// 计算页眉的实际高度，包括分割线
const headerHeight = Math.max(logoY + logoHeight, titleY + 64 + 48 + 48) + 20; // 64px字体 + 48px间距 + 48px字体 + 20px边距
const headerHeight = Math.max(titleY + 64 + 48 + 48) + 0; // 64px字体 + 48px间距 + 48px字体 + 20px边距
// this.currentY = headerHeight;
this.currentY += headerHeight;
this.drawLine(this.currentY);
this.drawDivider(this.currentY);
}
drawMiniHeader() {
@@ -364,7 +365,7 @@ class WordDrawService {
// 计算迷你页眉的实际高度
const miniHeaderHeight = titleY + 64 + 20; // 64px字体 + 20px边距
this.currentY = miniHeaderHeight;
this.drawLine(this.currentY);
this.drawDivider(this.currentY);
}
/**
@@ -392,23 +393,14 @@ class WordDrawService {
const contentHeight = canvas.height - contentTop - bottomMargin;
const cellSize = 140;
const minGap = 24; // 最小格子列间距，用于保证横向不拥挤，后续可动态调整为实际间距
const rowGap = 36; // 最小格子行间距，用于保证纵向不拥挤，后续可动态调整为实际间距
// 计算每行可容纳的田字格数量
const columnNumber = Math.max(1, Math.floor((contentWidth + minGap) / (cellSize + minGap)));
// 计算每列可容纳的田字格数量
const rowNumber = Math.max(1, Math.floor((contentHeight + rowGap) / (cellSize + rowGap)));
// 计算总需要的田字格数量
const totalCellsNeeded = rowNumber * columnNumber;
// 统一通过 getMaxGridLayout 获取最大行列数
const { maxRow, maxCol } = this.getMaxGridLayout();
// 动态调整间距以充分利用空间（在允许的最小间距基础上弹性扩展以适配画布）
const actualRowGap = rowNumber > 1 ? (contentHeight - rowNumber * cellSize) / (rowNumber - 1) : 0;
const actualColGap = columnNumber > 1 ? (contentWidth - columnNumber * cellSize) / (columnNumber - 1) : 0;
const actualRowGap = maxRow > 1 ? (contentHeight - maxRow * cellSize) / (maxRow - 1) : 0;
const actualColGap = maxCol > 1 ? (contentWidth - maxCol * cellSize) / (maxCol - 1) : 0;
console.log(`布局信息: 总格数=${totalCellsNeeded}, 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
// console.log(`布局信息: 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
// 第一阶段：绘制所有空田字格
this.drawEmptyGrids({
@@ -418,8 +410,8 @@ class WordDrawService {
cellSize,
colGap: actualColGap,
rowGap: actualRowGap,
rowNumber,
columnNumber
maxRow,
maxCol
});
if (characterData && characterData.length > 0) {
@@ -432,26 +424,36 @@ class WordDrawService {
cellSize,
colGap: actualColGap,
rowGap: actualRowGap,
columnNumber
maxCol,
maxRow
});
};
}
/**
* 计算总需要的田字格数量
* 获取当前页面可绘制田字格的最大行数与列数（与绘制使用同一套计算规则）
*/
// calculateTotalCellsNeeded(characters: string[], wordsMap: Record<string, string[]>): number {
// let totalCells = 0;
// characters.forEach((char) => {
// const strokes = wordsMap[char] || [];
// const strokeCount = strokes.length;
// const preview = 1; // 预览格
// const practice = Math.min(strokeCount, 8); // 最多8个练习格
// const blanks = 2; // 空白格
// totalCells += preview + practice + blanks;
// });
// return totalCells;
// }
getMaxGridLayout(): { maxRow: number; maxCol: number } {
const { canvas } = this;
// 布局参数需与 drawContent 保持一致
const topGap = 50;
const leftMargin = 120;
const rightMargin = 120;
const bottomMargin = 120;
const contentTop = this.currentY + topGap;
const contentWidth = canvas.width - leftMargin - rightMargin;
const contentHeight = canvas.height - contentTop - bottomMargin;
const cellSize = 140;
const minGap = 24;
const rowGap = 36;
const maxCol = Math.max(1, Math.floor((contentWidth + minGap) / (cellSize + minGap)));
const maxRow = Math.max(1, Math.floor((contentHeight + rowGap) / (cellSize + rowGap)));
return { maxRow, maxCol };
}
/**
* 绘制空田字格网格
@@ -463,8 +465,8 @@ class WordDrawService {
cellSize,
colGap,
rowGap,
rowNumber,
columnNumber
maxRow,
maxCol
}: {
ctx: RenderingContext;
startX: number;
@@ -472,12 +474,11 @@ class WordDrawService {
cellSize: number;
colGap: number;
rowGap: number;
rowNumber: number; // 行数
columnNumber: number; // 列数
maxRow: number; // 行数
maxCol: number; // 列数
}) {
console.log('drawEmptyGrids startY----:', startY)
for (let row = 0; row < rowNumber; row++) {
for (let col = 0; col < columnNumber; col++) {
for (let row = 0; row < maxRow; row++) {
for (let col = 0; col < maxCol; col++) {
const x = startX + col * (cellSize + colGap) + cellSize / 2;
const y = startY + row * (cellSize + rowGap) + cellSize / 2;
drawTianZiGrid({ ctx, x, y, size: cellSize });
@@ -496,7 +497,8 @@ class WordDrawService {
cellSize,
colGap,
rowGap,
columnNumber
maxCol,
maxRow
}: {
ctx: RenderingContext;
characterData: CharacterItem[];
@@ -505,69 +507,60 @@ class WordDrawService {
cellSize: number;
colGap: number;
rowGap: number;
columnNumber: number;
maxCol: number;
maxRow: number;
}) {
const reservedCells = 2;
let rowIndex = 0, columnIndex = 0;
let rowIndex = 0;
// console.log('开始绘制练字内容，汉字数量:', characters.length);
characterData.forEach((item, index) => {
const character = item.character;
for (let i = 0; i < characterData.length; i++) {
const item = characterData[i];
const strokes = item.strokes;
const strokeCount = strokes.length;
console.log(`绘制第 ${index + 1} 个汉字 "${character}"，笔画数: ${strokeCount}`);
const totalCells = 1 + strokeCount; // 预览 + 练习
const totalRows = Math.ceil(totalCells / maxCol);
// 1. 预览格：显示完整汉字（黑色）
this.drawPreviewCell({
ctx,
strokes,
startX,
startY,
cellSize,
colGap,
rowGap,
rowIndex,
});
columnIndex++;
if (rowIndex + totalRows > maxRow) {
break; // 放不下，停止绘制
}
// 2. 练习格：逐笔画显示（红色）
for (let strokeIndex = 0; strokeIndex < strokeCount; strokeIndex++) {
// 先绘制当前笔画
this.drawPracticeCell({
ctx,
strokes,
strokeIndex,
startX,
startY,
cellSize,
colGap,
rowGap,
rowIndex,
columnIndex
});
columnIndex++;
if (columnIndex >= columnNumber) {
columnIndex = 0;
rowIndex++;
for (let cellIdx = 0; cellIdx < totalCells; cellIdx++) {
const localRowOffset = Math.floor(cellIdx / maxCol);
const localColIndex = cellIdx % maxCol;
const globalRow = rowIndex + localRowOffset;
if (globalRow >= maxRow) {
break;
}
if (cellIdx === 0) {
this.drawPreviewCell({
ctx,
strokes,
startX,
startY,
cellSize,
colGap,
rowGap,
rowIndex: globalRow,
});
} else {
const strokeIndex = cellIdx - 1;
this.drawPracticeCell({
ctx,
strokes,
strokeIndex,
startX,
startY,
cellSize,
colGap,
rowGap,
rowIndex: globalRow,
columnIndex: localColIndex,
});
}
// console.log(`笔画 ${strokeIndex + 1} 绘制完成，当前 columnIndex: ${columnIndex}`);
}
if (columnIndex + reservedCells > columnNumber) {
columnIndex = 0;
rowIndex++;
}
// 4. 强制下一个汉字换行到新行的第一个田字格
if (index < characterData.length - 1) { // 不是最后一个汉字
rowIndex = rowIndex + 1;
columnIndex = 0;
// console.log(`汉字 "${char}" 绘制完成，强制换行到新行，下一个汉字从 rowIndex: ${rowIndex}, columnIndex: ${columnIndex} 开始`);
}
});
// console.log('所有汉字绘制完成');
rowIndex = rowIndex + totalRows;
}
}
/**
@@ -651,13 +644,13 @@ class WordDrawService {
offsetY: y,
size: cellSize,
uptoInclusive: strokeIndex,
fillStyle: 'rgb(220, 20, 20)', // 深红色填充
strokeStyle: 'rgb(220, 20, 20)', // 深红色描边
fillStyle: '#ccc',
strokeStyle: '#ccc',
lineWidth: 3, // 中等粗细
});
}
drawLine(linY: number) {
drawDivider(linY: number) {
const { canvas, ctx } = this;
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
miniprogram/utils/getWordsSvgJson.ts
+3 -2
View File
@@ -6,8 +6,9 @@ import { getJson } from './http';
const CACHE_CONFIG = {
key: 'svgWordsData', // 缓存键名
expireDays: 7, // 缓存过期天数
// url: 'https://cdn.joeyone.cn/words-svg-all.json' // 远程数据地址
url: 'https://cdn.joeyone.cn/words-svg-3000.json' // 远程数据地址
// url: 'https://cdn.joeyone.cn/doodle/words-svg-all.json' // 远程数据地址
// url: 'https://cdn.joeyone.cn/doodle/words-svg-3000.json' // 远程数据地址
url: 'https://cdn.joeyone.cn/doodle/char_svg_3500.json' // 远程数据地址
};
/**