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
2026-05-09 09:56:16 +08:00
parent b85afde7c0
commit c21ac9e935
27 changed files with 328 additions and 1135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/supportPages/copyBook/copyBook.json
+1 -1
View File
@@ -10,7 +10,7 @@
"van-dialog": "@vant/weapp/dialog/index",
"word-input": "/components/word-input/word-input",
"word-card": "/components/word-card/word-card",
"word-picker": "/components/word-picker/word-picker",
"word-picker": "/components3.0/word-picker/word-picker",
"empty-state": "/components/empty-state/empty-state",
"share-guide-popup": "/components/share-guide-popup/share-guide-popup",
"add-to-miniprogram-tip": "/components/add-to-miniprogram-tip/add-to-miniprogram-tip"
miniprogram/supportPages/copyBook/copyBook.ts
+3 -3
View File
@@ -2,7 +2,7 @@ import WordDrawService from '../../service/wordDrawService';
import { downloadPrint } from '../../utils/downloadPrint';
import { PAPER_SIZE } from '../../constants/colors';
import { getWordsSvgData } from '../../utils/getWordsSvgJson';
import { WORDS } from '../../constants/words';
import { WORDS } from '../../core/data/words';
import { CharacterItem } from '../../types/characterType';
import tracker from '../../utils/tracker';
import { defaultShareConfig } from '../../config/config';
@@ -98,7 +98,7 @@ Page({
onConfirmInput(e: any) {
const value: string = (e && e.detail && e.detail.value) || '';
const text = (value || '').trim();
// 如果文本框为空，清空输入汉字
if (!text) {
const { selectedWords } = this.data as any;
@@ -204,7 +204,7 @@ Page({
deleteWordCard(e: any) {
const { key } = e.detail;
const { inputWords, selectedWords } = this.data as any;
// 判断删除的是输入汉字还是选择的汉字
if (key < inputWords.length) {
// 删除的是输入汉字
miniprogram/supportPages/index/index.json
-23
View File
@@ -1,23 +0,0 @@
{
"navigationBarTitleText": "识字",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFD719",
"homeButton": true,
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-icon": "@vant/weapp/icon/index",
"van-popup": "@vant/weapp/popup/index",
"van-dialog": "@vant/weapp/dialog/index",
"word-input": "../../components/word-input/word-input",
"word-card": "../../components/word-card/word-card",
"color-picker": "../../components/color-picker/color-picker",
"introduction-popup": "../../components/introduction-popup/introduction-popup",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"add-to-miniprogram-tip": "../../components/add-to-miniprogram-tip/add-to-miniprogram-tip",
"toy-button": "../../toy/button-v2/button",
"word-picker": "../../components/word-picker/word-picker",
"empty-state": "../../components/empty-state/empty-state"
}
}
miniprogram/supportPages/index/index.less
-177
View File
@@ -1,177 +0,0 @@
page {
background-color: #f6f6f6;
}
.page-container {
background-color: #f6f6f6;
padding: 0 24rpx;
box-sizing: border-box;
.empty {
height: 190rpx;
}
}
.wrapper {
background-color: #ffffff;
border-radius: 20rpx;
padding: 36rpx 24rpx;
box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
margin: 30rpx 0;
display: flex;
flex-direction: column;
.wrapper-title {
font-size: 32rpx;
color: #141414;
margin-bottom: 36rpx; // 增大标题与内容间距
font-weight: bold;
text-align: center;
}
&.hidden {
visibility: hidden;
}
.word-card-box {
padding: 34rpx 0;
.word-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 38rpx; // 间距从24rpx提升到32rpx
}
}
.word-input-box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.operation-box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
// 模板选择区域
.template-section {
margin-top: 40rpx;
.template-title {
font-size: 28rpx;
font-weight: 600;
color: #141414;
margin-bottom: 24rpx;
text-align: center;
}
.template-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.template-item {
background: #FFFFFF;
border: 2rpx solid #E8E8E8;
border-radius: 16rpx;
padding: 24rpx;
cursor: pointer;
transition: all 0.2s ease-in-out;
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
&:active {
transform: scale(0.98);
}
&.active {
border-color: #93D333;
box-shadow: 0 0 0 4rpx rgba(147, 211, 51, 0.2);
}
.template-checkbox {
width: 40rpx;
height: 40rpx;
border: 2rpx solid #E8E8E8;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
flex-shrink: 0;
transition: all 0.2s ease-in-out;
.checkbox-icon {
color: #FFFFFF;
font-size: 24rpx;
font-weight: bold;
}
}
&.active .template-checkbox {
background: #93D333;
border-color: #93D333;
}
.template-name {
font-size: 28rpx;
color: #141414;
font-weight: 500;
flex: 1;
}
&.active .template-name {
color: #93D333;
font-weight: 600;
}
}
}
}
// .canvas-wrapper {
// width: 100%;
// background-color: #fff;
// box-sizing: border-box;
// }
.canvas-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 400rpx;
background: #f8f9fa;
border-radius: 12rpx;
border: 2rpx dashed #dee2e6;
}
.canvas-content {
max-width: 100%;
border-radius: 8rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
overflow: hidden;
}
// #canvasContent {
// border: 1px solid #666;
// }
.bottom-btn-box {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 120rpx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15);
padding: 0 24rpx;
box-sizing: border-box;
border-radius: 16rpx 16rpx 0 0;
}
miniprogram/supportPages/index/index.ts
-475
View File
@@ -1,475 +0,0 @@
import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
import { WORDS } from '../../constants/words';
import {
DrawServiceFactory,
IDrawService,
TemplateType,
} from '../../service/drawServiceFactory';
import { downloadPrint } from '../../utils/downloadPrint';
import tracker from '../../utils/tracker';
import { defaultShareConfig } from '../../config/config';
Page({
canvas: null as Canvas | null,
ctx: null as RenderingContext | null,
boxHeight: 0,
boxWidth: 0,
drawService: null as IDrawService | null,
data: {
cardList: [] as CardList,
selectedWords: [] as string[],
showColorPopup: false,
currentKey: 0,
currentColor: '',
showIntroductionPopup: false,
showSelectWordPopup: false, // 选择文字弹窗
selectedTemplate: 'grid', // 选中的模板类型 grid 或 find 模式
env: 'release',
isPCDevtool: false,
showShareDialog: false, // 显示分享引导弹窗
},
onLoad(options: { template?: string }) {
const { template } = options;
this.setData({
selectedTemplate: template || 'grid',
});
const hasShowIntroduction =
wx.getStorageSync('hasShowIntroduction') || false;
// 判断是否在PC端开发工具上运行
const systemInfo = wx.getDeviceInfo();
if (systemInfo.platform === 'devtools') {
this.setData({
isPCDevtool: true,
});
}
if (!hasShowIntroduction) {
this.setData(
{
cardList: [
{ color: '#FF0000', word: '涂' },
{ color: '#00FF00', word: '鸦' },
{ color: '#FF7F00', word: '丫' },
{ color: '#00FFFF', word: '欢' },
{ color: '#FFFF00', word: '迎' },
{ color: '#8A2BE2', word: '您' },
],
selectedWords: ['涂', '鸦', '丫', '欢', '迎', '您'],
// showIntroductionPopup: true,
env: getApp().globalData.env || 'release',
},
() => {
this.drawCanvas();
},
);
} else {
this.setData({
env: getApp().globalData.env || 'release',
});
}
},
onReady() {
// 当cardList为空时，canvas相关元素不会被渲染，所以不需要在这里初始化
// 尺寸计算将在initCanvas方法中进行
},
initCanvas() {
// 先获取canvasWrapper的尺寸来计算canvas尺寸
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);
// 然后初始化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;
// 根据当前选中的模板类型创建对应的绘制服务
const templateType = this.data
.selectedTemplate as TemplateType;
this.drawService =
DrawServiceFactory.create(
templateType,
canvas,
ctx,
);
this.setData({ boxWidth, boxHeight });
// 初始化完成后，如果有cardList内容则立即绘制
const currentCardList = this.data.cardList;
if (currentCardList.length > 0) {
this.drawService
.draw(currentCardList)
.catch((err: any) => {
console.error('绘制失败:', err);
});
}
}
}
});
}
})
.exec();
},
/**
* 创建或更新绘制服务
* 根据当前选中的模板类型创建对应的服务实例
*/
createDrawService() {
if (this.canvas && this.ctx) {
const templateType = this.data.selectedTemplate as TemplateType;
this.drawService = DrawServiceFactory.create(
templateType,
this.canvas,
this.ctx,
);
}
},
/** 变更cardList 并更新canvas */
drawCanvas(
updatedCardList?: Array<{ color: string; word: string }>,
callback: () => void = () => {},
) {
if (updatedCardList) {
this.setData(
{
cardList: updatedCardList,
selectedWords: updatedCardList.map((item) => item.word),
},
() => {
// 如果cardList有内容且canvas未初始化，先初始化canvas
if (!this.canvas) {
this.initCanvas();
} else {
// 如果canvas已初始化，确保绘制服务是最新的
this.createDrawService();
}
// 如果canvas已初始化且有内容，则绘制
if (this.drawService && updatedCardList!.length > 0) {
this.drawService.draw(updatedCardList!).catch((err: any) => {
console.error('绘制失败:', err);
});
}
callback();
},
);
} else {
const currentCardList = this.data.cardList;
// 如果cardList有内容且canvas未初始化，先初始化canvas
if (!this.canvas) {
this.initCanvas();
} else {
// 如果canvas已初始化，确保绘制服务是最新的
this.createDrawService();
}
// 如果canvas已初始化且有内容，则绘制
if (this.drawService && currentCardList.length > 0) {
this.drawService.draw(currentCardList).catch((err: any) => {
console.error('绘制失败:', err);
});
}
}
},
tapCard(e: WechatMiniprogram.TouchEvent) {
const { url } = e.currentTarget.dataset;
wx.navigateTo({ url });
},
onConfirmInput(e: WechatMiniprogram.Input) {
const { cardList } = this.data;
const { value } = e.detail;
const characters = value.split('');
// 计算剩余空间
const remainingSlots = 6 - cardList.length;
if (remainingSlots <= 0) {
wx.showToast({
title: '最多只能添加6个字哦！',
icon: 'none',
duration: 2000,
});
return;
}
// 准备颜色数组
const allColors = WATER_COLORS.basic12.map((color) => color.hex);
const usedColors = cardList.map((item) => item.color);
const usedWords = cardList.map((item) => item.word);
const availableColors = allColors.filter(
(color) => !usedColors.includes(color),
);
const shuffledColors = [...availableColors].sort(
() => Math.random() - 0.5,
);
const newCharacters: string[] = [];
let isBeyond = false;
for (const char of characters) {
if (newCharacters.length >= remainingSlots) {
isBeyond = true;
break;
}
if (!usedWords.includes(char) && !newCharacters.includes(char)) {
newCharacters.push(char);
}
}
if (isBeyond) {
wx.showToast({
title: '最多只能添加6个字，多余的字未被添加哦！',
icon: 'none',
duration: 2000,
});
}
// 为新字符创建卡片
const newCards = newCharacters.map((char) => {
// 获取字对应的颜色
const colorHex = this.getColorByWord(char);
let color: string;
if (colorHex && !usedColors.includes(colorHex)) {
// 如果有对应颜色且未被使用,使用对应颜色
color = colorHex;
} else {
// 否则随机选择一个可用颜色
const randomIndex = Math.floor(
Math.random() * shuffledColors.length,
);
color = shuffledColors[randomIndex];
// 从可用颜色中移除已使用的颜色
shuffledColors.splice(randomIndex, 1);
}
return {
word: char,
color: color,
};
});
// 合并新旧卡片
const updatedCardList = [...cardList, ...newCards];
this.drawCanvas(updatedCardList);
},
deleteWordCard(e: WechatMiniprogram.CustomEvent) {
const { key, word } = e.detail;
const { cardList } = this.data;
const updatedCardList = cardList.filter((_, index) => index !== key);
this.drawCanvas(updatedCardList, () => {
wx.showToast({
title: `已删除 "${word}"`,
icon: 'none',
duration: 2000,
});
});
},
/** 下载打印 */
async exportToPrint() {
if (!this.canvas || this.data.cardList.length <= 0) {
return;
}
await downloadPrint(this.canvas, {
errorToast: '请先生成涂色卡',
trackerName: '涂色识字',
trackerMode: this.data.selectedTemplate,
});
},
/** 分享成功回调（由组件触发） */
onShareSuccess() {
this.setData({ showShareDialog: false });
},
onColorTap(e: WechatMiniprogram.CustomEvent) {
const { key, color } = e.detail;
this.setData({
showColorPopup: true,
currentKey: key,
currentColor: color,
});
},
onCloseColorPopup() {
this.setData({
showColorPopup: false,
currentKey: 0,
currentColor: '',
});
},
onChangeColor(e: WechatMiniprogram.CustomEvent) {
const { color } = e.detail;
const { currentKey, cardList } = this.data;
cardList[currentKey].color = color;
this.setData(
{
showColorPopup: false,
cardList,
},
() => {
this.drawCanvas();
},
);
},
onCloseIntroductionPopup() {
this.setData({ showIntroductionPopup: false });
wx.setStorageSync('hasShowIntroduction', true);
},
onShareAppMessage() {
// 上报分享埋点
tracker.reportShare('涂色识字');
return {
...defaultShareConfig,
path: `/pages/index/index?template=${this.data.selectedTemplate}`,
};
},
onShareTimeline() {
// 上报分享埋点
tracker.reportShare('涂色识字');
return {
...defaultShareConfig,
query: `/pages/index/index?template=${this.data.selectedTemplate}`,
};
},
clearCardList() {
// 清空cardList时，重置canvas相关引用，因为DOM元素会被移除
this.canvas = null;
this.ctx = null;
this.drawService = null;
this.drawCanvas([]);
},
// 随机生成
refreshCardList() {
// 获取前4个分类的所有文字
const allWords = WORDS.slice(0, 2).reduce((acc, category) => {
return acc.concat(category.words);
}, [] as string[]);
// 随机获取6个不重复的文字
const selectedWords: string[] = [];
while (selectedWords.length < 6) {
const randomWord =
allWords[Math.floor(Math.random() * allWords.length)];
if (!selectedWords.includes(randomWord)) {
selectedWords.push(randomWord);
}
}
// 随机获取6个不重复的颜色
const colors = [...WATER_COLORS.basic12];
const selectedColors: string[] = [];
while (selectedColors.length < 6) {
const randomIndex = Math.floor(Math.random() * colors.length);
const color = colors.splice(randomIndex, 1)[0];
selectedColors.push(color.hex);
}
// 组合文字和颜色
const cardList = selectedWords.map((word, index) => ({
color: selectedColors[index],
word,
}));
this.drawCanvas(cardList);
},
openSelectWordPopup() {
this.setData({
showSelectWordPopup: true,
});
},
closeSelectWordPopup() {
this.setData({
showSelectWordPopup: false,
});
},
// 获取颜色字对应的16进制颜色值
getColorByWord(word: string): string | null {
const colorMap: Record<string, string> = {
红: '#FF0000',
蓝: '#0000FF',
绿: '#00FF00',
黄: '#FFFF00',
黑: '#000000',
白: '#FFFFFF',
紫: '#800080',
橙: '#FF7F00',
粉: '#FF69B4',
棕: '#A52A2A',
灰: '#808080',
};
return colorMap[word] || null;
},
onChangeWord(e: WechatMiniprogram.CustomEvent) {
const selectedWords = e.detail.selectedWords as string[];
const colors = [...WATER_COLORS.basic12];
const cardList = selectedWords.map((word, index) => {
const colorHex = this.getColorByWord(word);
return {
color: colorHex || colors[index].hex,
word,
};
});
this.setData({ showSelectWordPopup: false });
this.drawCanvas(cardList);
},
onDebugEntryTap() {
wx.navigateTo({
url: '/supportPages/debug/debug',
});
},
// 模板选择事件
onSelectTemplate(e: WechatMiniprogram.TouchEvent) {
const { template } = e.currentTarget.dataset;
this.setData(
{
selectedTemplate: template,
},
() => {
// 模板切换后，重新创建绘制服务并重新绘制
if (this.canvas && this.ctx) {
this.createDrawService();
// 如果有文字卡片，重新绘制canvas
if (this.data.cardList.length > 0) {
this.drawCanvas();
}
}
},
);
},
});
miniprogram/supportPages/index/index.wxml
-146
View File
@@ -1,146 +0,0 @@
<view class="page-container">
<view class="wrapper">
<text class="wrapper-title">自定义涂鸦卡</text>
<view class="word-input-box">
<word-input bind:onConfirm="onConfirmInput" width="410rpx" />
<toy-button
type="green"
bind:click="openSelectWordPopup"
width="200rpx">
选择文字
</toy-button>
</view>
<view class="word-card-box">
<view class="word-cards-grid" wx:if="{{cardList.length > 0}}">
<word-card
wx:key="index"
wx:for="{{cardList}}"
wx:for-item="item"
wx:for-index="index"
key="{{index}}"
word="{{item.word}}"
color="{{item.color}}"
bind:onDelete="deleteWordCard"
bind:onColorTap="onColorTap" />
</view>
<empty-state
wx:if="{{!cardList.length}}"
title="还没有添加文字"
desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的涂鸦卡吧！"
hint="提示：最多可以同时添加 6 个文字" />
</view>
<view class="operation-box">
<toy-button
type="primary"
bind:click="refreshCardList"
width="410rpx"
icon="refresh"
icon-class-prefix="toy-icon">
随机生成
</toy-button>
<toy-button
disabled="{{cardList.length <= 0}}"
type="white"
bind:click="clearCardList"
width="200rpx"
icon="clear"
icon-class-prefix="toy-icon">
清空
</toy-button>
</view>
<!-- 趣味模板选择区域 -->
<view class="template-section">
<view class="template-title">选择涂色模板</view>
<view class="template-list">
<view
class="template-item {{selectedTemplate === 'grid' ? 'active' : ''}}"
data-template="grid"
bind:tap="onSelectTemplate">
<view class="template-checkbox">
<view
class="checkbox-icon"
wx:if="{{selectedTemplate === 'grid'}}"
>✓</view
>
</view>
<view class="template-name">网格模板</view>
</view>
<view
class="template-item {{selectedTemplate === 'find' ? 'active' : ''}}"
data-template="find"
bind:tap="onSelectTemplate">
<view class="template-checkbox">
<view
class="checkbox-icon"
wx:if="{{selectedTemplate === 'find'}}"
>✓</view
>
</view>
<view class="template-name">找字模板</view>
</view>
</view>
<ad-custom unit-id="adunit-4efb537f971b3f7d"></ad-custom>
</view>
</view>
<view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
<text class="wrapper-title">预览打印效果</text>
<view id="canvasWrapper" class="canvas-wrapper">
<canvas
type="2d"
id="canvasContent"
class="canvas-content"
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
</view>
</view>
<van-cell
wx:if="{{env !== 'release'}}"
is-link
title="debug页面"
link-type="navigateTo"
url="/supportPages/debug/debug" />
<view class="empty"></view>
<color-picker
show="{{showColorPopup}}"
currentColor="{{currentColor}}"
bind:onClose="onCloseColorPopup"
bind:onChange="onChangeColor" />
<word-picker
show="{{showSelectWordPopup}}"
cardList="{{cardList}}"
bind:onClose="closeSelectWordPopup"
bind:onChange="onChangeWord" />
</view>
<view class="bottom-btn-box">
<toy-button
openType="share"
type="green"
flat="{{true}}"
bind:click="onShareAppMessage"
width="220rpx"
height="80rpx"
icon="wechat"
icon-class-prefix="toy-icon">
分享
</toy-button>
<toy-button
type="primary"
flat="{{true}}"
bind:click="exportToPrint"
width="420rpx"
height="80rpx"
disabled="{{cardList.length <= 0}}"
icon="download"
icon-class-prefix="toy-icon">
下载打印
</toy-button>
</view>
<introduction-popup
wx:if="{{showIntroductionPopup}}"
bind:onClose="onCloseIntroductionPopup" />
<share-guide-popup
show="{{showShareDialog}}"
bind:onClose="onCloseShareDialog"
bind:onShareSuccess="onShareSuccess" />
<add-to-miniprogram-tip />