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-11-20 17:35:37 +08:00
parent 2e0f8f0fe1
commit 654ea69915
11 changed files with 1061 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/index/index.less
+36 -132
View File
@@ -56,7 +56,7 @@ page {
}
// 模板选择区域
/* .template-section {
.template-section {
margin-top: 40rpx;
.template-title {
@@ -67,9 +67,9 @@ page {
text-align: center;
}
.template-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
.template-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
@@ -77,156 +77,60 @@ page {
background: #FFFFFF;
border: 2rpx solid #E8E8E8;
border-radius: 16rpx;
padding: 16rpx;
padding: 24rpx;
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
&:active {
transform: scale(0.95);
transform: scale(0.98);
}
&.active {
border-color: #93D333;
box-shadow: 0 0 0 4rpx rgba(147, 211, 51, 0.2);
}
&::after {
content: '✓';
position: absolute;
top: 12rpx;
right: 12rpx;
width: 24rpx;
height: 24rpx;
background: #93D333;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.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: 14rpx;
font-size: 24rpx;
font-weight: bold;
}
}
.template-preview {
width: 100%;
height: 80rpx;
background: #F8F8F8;
border-radius: 12rpx;
margin-bottom: 12rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
.template-preview-content {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
width: 100%;
height: 100%;
.preview-word {
font-size: 20rpx;
font-weight: 600;
width: 24rpx;
height: 24rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6rpx;
background: rgba(255, 255, 255, 0.8);
}
// 不同模板的布局样式
&.grid-template {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rpx;
}
&.circle-template {
position: relative;
.preview-word {
position: absolute;
&:nth-child(1) {
top: 12rpx;
left: 50%;
transform: translateX(-50%);
}
&:nth-child(2) {
right: 12rpx;
top: 50%;
transform: translateY(-50%);
}
&:nth-child(3) {
bottom: 12rpx;
left: 50%;
transform: translateX(-50%);
}
&:nth-child(4) {
left: 12rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
&.random-template {
position: relative;
.preview-word {
position: absolute;
&:nth-child(1) {
top: 10rpx;
left: 16rpx;
}
&:nth-child(2) {
top: 24rpx;
right: 10rpx;
}
&:nth-child(3) {
bottom: 18rpx;
left: 10rpx;
}
&:nth-child(4) {
bottom: 10rpx;
right: 18rpx;
}
}
}
&.line-template {
flex-direction: row;
gap: 8rpx;
}
}
&.active .template-checkbox {
background: #93D333;
border-color: #93D333;
}
.template-name {
font-size: 22rpx;
color: #666666;
text-align: center;
font-size: 28rpx;
color: #141414;
font-weight: 500;
flex: 1;
}
.template-item.active & {
color: #93D333;
font-weight: 600;
}
&.active .template-name {
color: #93D333;
font-weight: 600;
}
}
} */
}
}
miniprogram/pages/index/index.ts
+119 -65
View File
@@ -1,6 +1,10 @@
import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
import { WORDS } from '../../constants/words';
import TextDrawService from '../../service/textDrawService';
import {
DrawServiceFactory,
IDrawService,
TemplateType,
} from '../../service/drawServiceFactory';
import { checkAndSaveImage } from '../../utils/saveImage';
Page({
@@ -8,7 +12,7 @@ Page({
ctx: null as RenderingContext | null,
boxHeight: 0,
boxWidth: 0,
textDrawService: null as TextDrawService | null,
drawService: null as IDrawService | null,
data: {
cardList: [] as CardList,
@@ -18,7 +22,7 @@ Page({
currentColor: '',
showIntroductionPopup: false,
showSelectWordPopup: false, // 选择文字弹窗
selectedTemplate: 'grid', // 选中的模板类型
selectedTemplate: 'find', // 选中的模板类型
env: 'release',
isPCDevtool: false,
},
@@ -36,21 +40,24 @@ Page({
}
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();
});
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',
@@ -88,13 +95,25 @@ Page({
if (ctx) {
this.canvas = canvas;
this.ctx = ctx;
this.textDrawService = new TextDrawService(canvas, 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.textDrawService.draw(currentCardList);
this.drawService
.draw(currentCardList)
.catch((err) => {
console.error('绘制失败:', err);
});
}
}
}
@@ -104,35 +123,63 @@ Page({
.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 = () => { },
callback: () => void = () => {},
) {
if (updatedCardList) {
this.setData({
cardList: updatedCardList,
selectedWords: updatedCardList.map((item) => item.word)
}, () => {
// 如果cardList有内容且canvas未初始化，先初始化canvas
if (!this.canvas) {
this.initCanvas();
}
// 如果canvas已初始化且有内容，则绘制
if (this.textDrawService && updatedCardList!.length > 0) {
this.textDrawService.draw(updatedCardList!);
}
callback();
});
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) => {
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.textDrawService && currentCardList.length > 0) {
this.textDrawService.draw(currentCardList);
if (this.drawService && currentCardList.length > 0) {
this.drawService.draw(currentCardList).catch((err) => {
console.error('绘制失败:', err);
});
}
}
},
@@ -199,7 +246,9 @@ Page({
color = colorHex;
} else {
// 否则随机选择一个可用颜色
const randomIndex = Math.floor(Math.random() * shuffledColors.length);
const randomIndex = Math.floor(
Math.random() * shuffledColors.length,
);
color = shuffledColors[randomIndex];
// 从可用颜色中移除已使用的颜色
shuffledColors.splice(randomIndex, 1);
@@ -207,7 +256,7 @@ Page({
return {
word: char,
color: color
color: color,
};
});
@@ -291,7 +340,7 @@ Page({
// 清空cardList时，重置canvas相关引用，因为DOM元素会被移除
this.canvas = null;
this.ctx = null;
this.textDrawService = null;
this.drawService = null;
this.drawCanvas([]);
},
@@ -305,7 +354,8 @@ Page({
// 随机获取6个不重复的文字
const selectedWords: string[] = [];
while (selectedWords.length < 6) {
const randomWord = allWords[Math.floor(Math.random() * allWords.length)];
const randomWord =
allWords[Math.floor(Math.random() * allWords.length)];
if (!selectedWords.includes(randomWord)) {
selectedWords.push(randomWord);
}
@@ -323,7 +373,7 @@ Page({
// 组合文字和颜色
const cardList = selectedWords.map((word, index) => ({
color: selectedColors[index],
word
word,
}));
this.drawCanvas(cardList);
},
@@ -342,17 +392,17 @@ Page({
// 获取颜色字对应的16进制颜色值
getColorByWord(word: string): string | null {
const colorMap: Record<string, string> = {
'红': '#FF0000',
'蓝': '#0000FF',
'绿': '#00FF00',
'黄': '#FFFF00',
'黑': '#000000',
'白': '#FFFFFF',
'紫': '#800080',
'橙': '#FF7F00',
'粉': '#FF69B4',
'棕': '#A52A2A',
'灰': '#808080'
红: '#FF0000',
蓝: '#0000FF',
绿: '#00FF00',
黄: '#FFFF00',
黑: '#000000',
白: '#FFFFFF',
紫: '#800080',
橙: '#FF7F00',
粉: '#FF69B4',
棕: '#A52A2A',
灰: '#808080',
};
return colorMap[word] || null;
},
@@ -365,7 +415,7 @@ Page({
const colorHex = this.getColorByWord(word);
return {
color: colorHex || colors[index].hex,
word
word,
};
});
@@ -382,16 +432,20 @@ Page({
// 模板选择事件
onSelectTemplate(e: WechatMiniprogram.TouchEvent) {
const { template } = e.currentTarget.dataset;
this.setData({
selectedTemplate: template
});
// 这里后续可以添加根据模板类型更新canvas绘制效果的逻辑
console.log('选择的模板类型:', template);
// 如果有文字卡片，可以重新绘制canvas
if (this.data.cardList.length > 0) {
this.drawCanvas();
}
this.setData(
{
selectedTemplate: template,
},
() => {
// 模板切换后，重新创建绘制服务并重新绘制
if (this.canvas && this.ctx) {
this.createDrawService();
// 如果有文字卡片，重新绘制canvas
if (this.data.cardList.length > 0) {
this.drawCanvas();
}
}
},
);
},
});
miniprogram/pages/index/index.wxml
+19 -81
View File
@@ -51,99 +51,37 @@
</view>
<!-- 趣味模板选择区域 -->
<!-- <view class="template-section">
<view class="template-section">
<view class="template-title">选择涂色模板</view>
<view class="template-grid">
<view class="template-list">
<view
class="template-item {{selectedTemplate === 'grid' ? 'active' : ''}}"
data-template="grid"
bind:tap="onSelectTemplate">
<view class="template-preview">
<view class="template-preview-content grid-template">
<view class="preview-word" style="color: #ffd719"
>王</view
>
<view class="preview-word" style="color: #93d333"
>手</view
>
<view class="preview-word" style="color: #ff6b9d"
>哭</view
>
<view class="preview-word" style="color: #4ecdc4"
>少</view
>
</view>
<view class="template-checkbox">
<view
class="checkbox-icon"
wx:if="{{selectedTemplate === 'grid'}}"
>✓</view
>
</view>
<view class="template-name">网格排列</view>
<view class="template-name">网格模板</view>
</view>
<view
class="template-item {{selectedTemplate === 'circle' ? 'active' : ''}}"
data-template="circle"
class="template-item {{selectedTemplate === 'find' ? 'active' : ''}}"
data-template="find"
bind:tap="onSelectTemplate">
<view class="template-preview">
<view class="template-preview-content circle-template">
<view class="preview-word" style="color: #ffd719"
>王</view
>
<view class="preview-word" style="color: #93d333"
>手</view
>
<view class="preview-word" style="color: #ff6b9d"
>哭</view
>
<view class="preview-word" style="color: #4ecdc4"
>少</view
>
</view>
<view class="template-checkbox">
<view
class="checkbox-icon"
wx:if="{{selectedTemplate === 'find'}}"
>✓</view
>
</view>
<view class="template-name">圆形排列</view>
</view>
<view
class="template-item {{selectedTemplate === 'random' ? 'active' : ''}}"
data-template="random"
bind:tap="onSelectTemplate">
<view class="template-preview">
<view class="template-preview-content random-template">
<view class="preview-word" style="color: #ffd719"
>王</view
>
<view class="preview-word" style="color: #93d333"
>手</view
>
<view class="preview-word" style="color: #ff6b9d"
>哭</view
>
<view class="preview-word" style="color: #4ecdc4"
>少</view
>
</view>
</view>
<view class="template-name">随机分布</view>
</view>
<view
class="template-item {{selectedTemplate === 'line' ? 'active' : ''}}"
data-template="line"
bind:tap="onSelectTemplate">
<view class="template-preview">
<view class="template-preview-content line-template">
<view class="preview-word" style="color: #ffd719"
>王</view
>
<view class="preview-word" style="color: #93d333"
>手</view
>
<view class="preview-word" style="color: #ff6b9d"
>哭</view
>
<view class="preview-word" style="color: #4ecdc4"
>少</view
>
</view>
</view>
<view class="template-name">直线排列</view>
<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>