feat:输入优化、文字分类
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { WATER_COLORS } from '../../constants/index';
|
import { WATER_COLORS } from '../../constants/colors';
|
||||||
|
|
||||||
Component({
|
Component({
|
||||||
options: {},
|
options: {},
|
||||||
|
|||||||
@@ -8,6 +8,5 @@
|
|||||||
class="word-input"
|
class="word-input"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="请输入小朋友喜欢的文字"
|
placeholder="请输入小朋友喜欢的文字"
|
||||||
bindconfirm="onConfirm"
|
bindconfirm="onConfirm" />
|
||||||
maxlength="6" />
|
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -0,0 +1,261 @@
|
|||||||
|
export const WORDS = [
|
||||||
|
{
|
||||||
|
categoryId: 0,
|
||||||
|
icon: '🌟',
|
||||||
|
categoryName: '基础独体字',
|
||||||
|
words: [
|
||||||
|
'人',
|
||||||
|
'口',
|
||||||
|
'手',
|
||||||
|
'上',
|
||||||
|
'下',
|
||||||
|
'日',
|
||||||
|
'月',
|
||||||
|
'水',
|
||||||
|
'火',
|
||||||
|
'山',
|
||||||
|
'大',
|
||||||
|
'小',
|
||||||
|
'天',
|
||||||
|
'土',
|
||||||
|
'木',
|
||||||
|
'中',
|
||||||
|
'个',
|
||||||
|
'工',
|
||||||
|
'王',
|
||||||
|
'车',
|
||||||
|
'儿',
|
||||||
|
'女',
|
||||||
|
'子',
|
||||||
|
'门',
|
||||||
|
'马',
|
||||||
|
'牛',
|
||||||
|
'羊',
|
||||||
|
'米',
|
||||||
|
'衣',
|
||||||
|
'白',
|
||||||
|
'田',
|
||||||
|
'石',
|
||||||
|
'雨',
|
||||||
|
'电',
|
||||||
|
'云',
|
||||||
|
'花',
|
||||||
|
'草',
|
||||||
|
'叶',
|
||||||
|
'果',
|
||||||
|
'鸟',
|
||||||
|
'虫',
|
||||||
|
'鱼',
|
||||||
|
'头',
|
||||||
|
'目',
|
||||||
|
'耳',
|
||||||
|
'足',
|
||||||
|
'心',
|
||||||
|
'力',
|
||||||
|
'立',
|
||||||
|
'正',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 1,
|
||||||
|
icon: '🏠',
|
||||||
|
categoryName: '生活高频字',
|
||||||
|
words: [
|
||||||
|
'爸',
|
||||||
|
'妈',
|
||||||
|
'爷',
|
||||||
|
'奶',
|
||||||
|
'哥',
|
||||||
|
'弟',
|
||||||
|
'姐',
|
||||||
|
'妹',
|
||||||
|
'书',
|
||||||
|
'包',
|
||||||
|
'尺',
|
||||||
|
'刀',
|
||||||
|
'本',
|
||||||
|
'笔',
|
||||||
|
'桌',
|
||||||
|
'灯',
|
||||||
|
'家',
|
||||||
|
'房',
|
||||||
|
'床',
|
||||||
|
'吃',
|
||||||
|
'喝',
|
||||||
|
'坐',
|
||||||
|
'走',
|
||||||
|
'跑',
|
||||||
|
'看',
|
||||||
|
'听',
|
||||||
|
'说',
|
||||||
|
'笑',
|
||||||
|
'哭',
|
||||||
|
'爱',
|
||||||
|
'好',
|
||||||
|
'有',
|
||||||
|
'来',
|
||||||
|
'去',
|
||||||
|
'开',
|
||||||
|
'关',
|
||||||
|
'里',
|
||||||
|
'外',
|
||||||
|
'多',
|
||||||
|
'少',
|
||||||
|
'红',
|
||||||
|
'黄',
|
||||||
|
'蓝',
|
||||||
|
'绿',
|
||||||
|
'白',
|
||||||
|
'黑',
|
||||||
|
'是',
|
||||||
|
'不',
|
||||||
|
'我',
|
||||||
|
'你',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 2,
|
||||||
|
icon: '',
|
||||||
|
categoryName: '自然与动作',
|
||||||
|
words: [
|
||||||
|
'风',
|
||||||
|
'雪',
|
||||||
|
'星',
|
||||||
|
'光',
|
||||||
|
'林',
|
||||||
|
'河',
|
||||||
|
'海',
|
||||||
|
'沙',
|
||||||
|
'树',
|
||||||
|
'苗',
|
||||||
|
'春',
|
||||||
|
'夏',
|
||||||
|
'秋',
|
||||||
|
'冬',
|
||||||
|
'东',
|
||||||
|
'南',
|
||||||
|
'西',
|
||||||
|
'北',
|
||||||
|
'飞',
|
||||||
|
'跳',
|
||||||
|
'游',
|
||||||
|
'唱',
|
||||||
|
'画',
|
||||||
|
'洗',
|
||||||
|
'买',
|
||||||
|
'卖',
|
||||||
|
'问',
|
||||||
|
'学',
|
||||||
|
'读',
|
||||||
|
'写',
|
||||||
|
'早',
|
||||||
|
'晚',
|
||||||
|
'明',
|
||||||
|
'亮',
|
||||||
|
'高',
|
||||||
|
'长',
|
||||||
|
'圆',
|
||||||
|
'方',
|
||||||
|
'快',
|
||||||
|
'乐',
|
||||||
|
'热',
|
||||||
|
'冷',
|
||||||
|
'轻',
|
||||||
|
'重',
|
||||||
|
'新',
|
||||||
|
'旧',
|
||||||
|
'和',
|
||||||
|
'同',
|
||||||
|
'会',
|
||||||
|
'要',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 3,
|
||||||
|
icon: '',
|
||||||
|
categoryName: '数字与颜色',
|
||||||
|
words: [
|
||||||
|
'一',
|
||||||
|
'二',
|
||||||
|
'三',
|
||||||
|
'四',
|
||||||
|
'五',
|
||||||
|
'六',
|
||||||
|
'七',
|
||||||
|
'八',
|
||||||
|
'九',
|
||||||
|
'十',
|
||||||
|
'红',
|
||||||
|
'蓝',
|
||||||
|
'绿',
|
||||||
|
'黄',
|
||||||
|
'黑',
|
||||||
|
'白',
|
||||||
|
'紫',
|
||||||
|
'橙',
|
||||||
|
'粉',
|
||||||
|
'棕',
|
||||||
|
'灰',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 4,
|
||||||
|
icon: '☀️',
|
||||||
|
categoryName: '日字旁',
|
||||||
|
words: ['日', '明', '早', '时', '晴', '春', '星', '晨'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 5,
|
||||||
|
icon: '💧',
|
||||||
|
categoryName: '三点水',
|
||||||
|
words: ['水', '江', '河', '流', '沙', '洗', '海', '汗'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 6,
|
||||||
|
icon: '🐦',
|
||||||
|
categoryName: '鸟字边',
|
||||||
|
words: ['鸟', '鸡', '鸭', '鹅', '鸣', '鸽', '鸦'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 7,
|
||||||
|
icon: '🐾',
|
||||||
|
categoryName: '反犬旁',
|
||||||
|
words: ['狗', '猫', '猴', '狮', '狼', '猪'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 8,
|
||||||
|
icon: '🪱',
|
||||||
|
categoryName: '虫字旁',
|
||||||
|
words: ['虫', '蚁', '蝶', '蜻', '蛙', '蛇', '蜘', '蜂'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 9,
|
||||||
|
icon: '🌧️',
|
||||||
|
categoryName: '雨字头',
|
||||||
|
words: ['雨', '雪', '雷', '露', '雾', '雹', '霜'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 10,
|
||||||
|
icon: '🌲',
|
||||||
|
categoryName: '木字旁',
|
||||||
|
words: ['木', '林', '树', '桃', '森', '松', '桥', '枝'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 11,
|
||||||
|
icon: '👄',
|
||||||
|
categoryName: '口字旁',
|
||||||
|
words: ['口', '吃', '叫', '唱', '听', '吹', '叶', '和'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 12,
|
||||||
|
icon: '🧍',
|
||||||
|
categoryName: '单人旁',
|
||||||
|
words: ['你', '他', '们', '作', '休', '住', '伙', '伴'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
categoryId: 13,
|
||||||
|
icon: '❤️',
|
||||||
|
categoryName: '竖心旁',
|
||||||
|
words: ['心', '情', '快', '怕', '惊', '忙', '怀'],
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { WATER_COLORS, PAPER_SIZE } from '../../constants/index';
|
import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
|
||||||
import TextDrawService from '../../service/textDrawService';
|
import TextDrawService from '../../service/textDrawService';
|
||||||
|
|
||||||
Page({
|
Page({
|
||||||
@@ -20,19 +20,19 @@ Page({
|
|||||||
const hasShowIntroduction =
|
const hasShowIntroduction =
|
||||||
wx.getStorageSync('hasShowIntroduction') || false;
|
wx.getStorageSync('hasShowIntroduction') || false;
|
||||||
|
|
||||||
// if (!hasShowIntroduction) {
|
if (!hasShowIntroduction) {
|
||||||
this.setData({
|
this.setData({
|
||||||
cardList: [
|
cardList: [
|
||||||
{ color: '#FF0000', word: '涂' },
|
{ color: '#FF0000', word: '涂' },
|
||||||
{ color: '#00FF00', word: '欢' },
|
{ color: '#00FF00', word: '欢' },
|
||||||
{ color: '#FF7F00', word: '鸦' },
|
{ color: '#FF7F00', word: '鸦' },
|
||||||
{ color: '#00FFFF', word: '迎' },
|
{ color: '#00FFFF', word: '迎' },
|
||||||
{ color: '#FFFF00', word: '丫' },
|
{ color: '#FFFF00', word: '丫' },
|
||||||
{ color: '#8A2BE2', word: '你' },
|
{ color: '#8A2BE2', word: '你' },
|
||||||
],
|
],
|
||||||
showIntroductionPopup: true,
|
showIntroductionPopup: true,
|
||||||
});
|
});
|
||||||
// }
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onReady() {
|
onReady() {
|
||||||
@@ -82,7 +82,7 @@ Page({
|
|||||||
updatedCardList?: Array<{ color: string; word: string }>,
|
updatedCardList?: Array<{ color: string; word: string }>,
|
||||||
callback: () => void = () => {},
|
callback: () => void = () => {},
|
||||||
) {
|
) {
|
||||||
if (updatedCardList && updatedCardList.length > 0) {
|
if (updatedCardList && updatedCardList.length >= 0) {
|
||||||
this.setData({ cardList: updatedCardList }, callback);
|
this.setData({ cardList: updatedCardList }, callback);
|
||||||
} else {
|
} else {
|
||||||
updatedCardList = this.data.cardList;
|
updatedCardList = this.data.cardList;
|
||||||
@@ -97,15 +97,63 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
onConfirmInput(e: WechatMiniprogram.Input) {
|
onConfirmInput(e: WechatMiniprogram.Input) {
|
||||||
|
const { cardList } = this.data;
|
||||||
const { value } = e.detail;
|
const { value } = e.detail;
|
||||||
const characters = value.split('');
|
const characters = value.split('');
|
||||||
const shuffledColors = [...WATER_COLORS.extended24].sort(
|
// 计算剩余空间
|
||||||
|
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,
|
() => Math.random() - 0.5,
|
||||||
);
|
);
|
||||||
const updatedCardList = characters.map((char, index) => ({
|
|
||||||
color: shuffledColors[index % shuffledColors.length].hex,
|
const newCharacters: string[] = [];
|
||||||
word: char,
|
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, index) => {
|
||||||
|
const colorIndex = index % shuffledColors.length;
|
||||||
|
return {
|
||||||
|
word: char,
|
||||||
|
color: shuffledColors[colorIndex],
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 合并新旧卡片
|
||||||
|
const updatedCardList = [...cardList, ...newCards];
|
||||||
this.drawCanvas(updatedCardList);
|
this.drawCanvas(updatedCardList);
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -113,7 +161,6 @@ Page({
|
|||||||
const { key, word } = e.detail;
|
const { key, word } = e.detail;
|
||||||
const { cardList } = this.data;
|
const { cardList } = this.data;
|
||||||
const updatedCardList = cardList.filter((_, index) => index !== key);
|
const updatedCardList = cardList.filter((_, index) => index !== key);
|
||||||
|
|
||||||
this.drawCanvas(updatedCardList, () => {
|
this.drawCanvas(updatedCardList, () => {
|
||||||
wx.showToast({
|
wx.showToast({
|
||||||
title: `已删除 "${word}"`,
|
title: `已删除 "${word}"`,
|
||||||
@@ -172,10 +219,15 @@ Page({
|
|||||||
const { color } = e.detail;
|
const { color } = e.detail;
|
||||||
const { currentKey, cardList } = this.data;
|
const { currentKey, cardList } = this.data;
|
||||||
cardList[currentKey].color = color;
|
cardList[currentKey].color = color;
|
||||||
this.setData({
|
this.setData(
|
||||||
showColorPopup: false,
|
{
|
||||||
cardList,
|
showColorPopup: false,
|
||||||
});
|
cardList,
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
this.drawCanvas();
|
||||||
|
},
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
onCloseIntroductionPopup() {
|
onCloseIntroductionPopup() {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
// import { PAPER_SIZE } from './constant';
|
// import { PAPER_SIZE } from './constant';
|
||||||
import { PAPER_SIZE } from '../constants/index';
|
import { PAPER_SIZE } from '../constants/colors';
|
||||||
import { getMiniCodeImage } from '../utils/index';
|
import { getMiniCodeImage } from '../utils/index';
|
||||||
|
|
||||||
function calculateCircleCenters(
|
function calculateCircleCenters(
|
||||||
|
|||||||
Reference in New Issue
Block a user