feat:输入优化、文字分类
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { WATER_COLORS } from '../../constants/index';
|
||||
import { WATER_COLORS } from '../../constants/colors';
|
||||
|
||||
Component({
|
||||
options: {},
|
||||
|
||||
@@ -8,6 +8,5 @@
|
||||
class="word-input"
|
||||
type="text"
|
||||
placeholder="请输入小朋友喜欢的文字"
|
||||
bindconfirm="onConfirm"
|
||||
maxlength="6" />
|
||||
bindconfirm="onConfirm" />
|
||||
</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';
|
||||
|
||||
Page({
|
||||
@@ -20,7 +20,7 @@ Page({
|
||||
const hasShowIntroduction =
|
||||
wx.getStorageSync('hasShowIntroduction') || false;
|
||||
|
||||
// if (!hasShowIntroduction) {
|
||||
if (!hasShowIntroduction) {
|
||||
this.setData({
|
||||
cardList: [
|
||||
{ color: '#FF0000', word: '涂' },
|
||||
@@ -32,7 +32,7 @@ Page({
|
||||
],
|
||||
showIntroductionPopup: true,
|
||||
});
|
||||
// }
|
||||
}
|
||||
},
|
||||
|
||||
onReady() {
|
||||
@@ -82,7 +82,7 @@ Page({
|
||||
updatedCardList?: Array<{ color: string; word: string }>,
|
||||
callback: () => void = () => {},
|
||||
) {
|
||||
if (updatedCardList && updatedCardList.length > 0) {
|
||||
if (updatedCardList && updatedCardList.length >= 0) {
|
||||
this.setData({ cardList: updatedCardList }, callback);
|
||||
} else {
|
||||
updatedCardList = this.data.cardList;
|
||||
@@ -97,15 +97,63 @@ Page({
|
||||
},
|
||||
|
||||
onConfirmInput(e: WechatMiniprogram.Input) {
|
||||
const { cardList } = this.data;
|
||||
const { value } = e.detail;
|
||||
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,
|
||||
);
|
||||
const updatedCardList = characters.map((char, index) => ({
|
||||
color: shuffledColors[index % shuffledColors.length].hex,
|
||||
|
||||
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, index) => {
|
||||
const colorIndex = index % shuffledColors.length;
|
||||
return {
|
||||
word: char,
|
||||
}));
|
||||
color: shuffledColors[colorIndex],
|
||||
};
|
||||
});
|
||||
|
||||
// 合并新旧卡片
|
||||
const updatedCardList = [...cardList, ...newCards];
|
||||
this.drawCanvas(updatedCardList);
|
||||
},
|
||||
|
||||
@@ -113,7 +161,6 @@ Page({
|
||||
const { key, word } = e.detail;
|
||||
const { cardList } = this.data;
|
||||
const updatedCardList = cardList.filter((_, index) => index !== key);
|
||||
|
||||
this.drawCanvas(updatedCardList, () => {
|
||||
wx.showToast({
|
||||
title: `已删除 "${word}"`,
|
||||
@@ -172,10 +219,15 @@ Page({
|
||||
const { color } = e.detail;
|
||||
const { currentKey, cardList } = this.data;
|
||||
cardList[currentKey].color = color;
|
||||
this.setData({
|
||||
this.setData(
|
||||
{
|
||||
showColorPopup: false,
|
||||
cardList,
|
||||
});
|
||||
},
|
||||
() => {
|
||||
this.drawCanvas();
|
||||
},
|
||||
);
|
||||
},
|
||||
|
||||
onCloseIntroductionPopup() {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// import { PAPER_SIZE } from './constant';
|
||||
import { PAPER_SIZE } from '../constants/index';
|
||||
import { PAPER_SIZE } from '../constants/colors';
|
||||
import { getMiniCodeImage } from '../utils/index';
|
||||
|
||||
function calculateCircleCenters(
|
||||
|
||||
Reference in New Issue
Block a user