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-29 17:45:12 +08:00
parent 643a7e23e7
commit c4f27f2125
13 changed files with 141224 additions and 60061 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/assets/fonts/demo.css
+245 -242
View File
@@ -1,171 +1,176 @@
/* Logo 字体 */ /* Logo 字体 */
@font-face { @font-face {
font-family: "iconfont logo"; font-family: 'iconfont logo';
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); /* src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); */
} }
.logo { .logo {
font-family: "iconfont logo"; font-family: 'iconfont logo';
font-size: 160px; font-size: 160px;
font-style: normal; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
/* tabs */ /* tabs */
.nav-tabs { .nav-tabs {
position: relative; position: relative;
} }
.nav-tabs .nav-more { .nav-tabs .nav-more {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
color: #666; color: #666;
} }
#tabs { #tabs {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
#tabs li { #tabs li {
cursor: pointer; cursor: pointer;
width: 100px; width: 100px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-bottom: -1px; margin-bottom: -1px;
color: #666; color: #666;
} }
#tabs .active { #tabs .active {
border-bottom-color: #f00; border-bottom-color: #f00;
color: #222; color: #222;
} }
.tab-container .content { .tab-container .content {
display: none; display: none;
} }
/* 页面布局 */ /* 页面布局 */
.main { .main {
padding: 30px 100px; padding: 30px 100px;
width: 960px; width: 960px;
margin: 0 auto; margin: 0 auto;
} }
.main .logo { .main .logo {
color: #333; color: #333;
text-align: left; text-align: left;
margin-bottom: 30px; margin-bottom: 30px;
line-height: 1; line-height: 1;
height: 110px; height: 110px;
margin-top: -50px; margin-top: -50px;
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
} }
.main .logo a { .main .logo a {
font-size: 160px; font-size: 160px;
color: #333; color: #333;
} }
.helps { .helps {
margin-top: 40px; margin-top: 40px;
} }
.helps pre { .helps pre {
padding: 20px; padding: 20px;
margin: 10px 0; margin: 10px 0;
border: solid 1px #e7e1cd; border: solid 1px #e7e1cd;
background-color: #fffdef; background-color: #fffdef;
overflow: auto; overflow: auto;
} }
.icon_lists { .icon_lists {
width: 100% !important; width: 100% !important;
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
} }
.icon_lists li { .icon_lists li {
width: 100px; width: 100px;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 20px; margin-right: 20px;
text-align: center; text-align: center;
list-style: none !important; list-style: none !important;
cursor: default; cursor: default;
} }
.icon_lists li .code-name { .icon_lists li .code-name {
line-height: 1.2; line-height: 1.2;
} }
.icon_lists .icon { .icon_lists .icon {
display: block; display: block;
height: 100px; height: 100px;
line-height: 100px; line-height: 100px;
font-size: 42px; font-size: 42px;
margin: 10px auto; margin: 10px auto;
color: #333; color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear; -webkit-transition:
-moz-transition: font-size 0.25s linear, width 0.25s linear; font-size 0.25s linear,
transition: font-size 0.25s linear, width 0.25s linear; width 0.25s linear;
-moz-transition:
font-size 0.25s linear,
width 0.25s linear;
transition:
font-size 0.25s linear,
width 0.25s linear;
} }
.icon_lists .icon:hover { .icon_lists .icon:hover {
font-size: 100px; font-size: 100px;
} }
.icon_lists .svg-icon { .icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */ /* 通过设置 font-size 来改变图标大小 */
width: 1em; width: 1em;
/* 图标和文字相邻时，垂直对齐 */ /* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em; vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */ /* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor; fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */ normalize.css 中也包含这行 */
overflow: hidden; overflow: hidden;
} }
.icon_lists li .name, .icon_lists li .name,
.icon_lists li .code-name { .icon_lists li .code-name {
color: #666; color: #666;
} }
/* markdown 样式 */ /* markdown 样式 */
.markdown { .markdown {
color: #666; color: #666;
font-size: 14px; font-size: 14px;
line-height: 1.8; line-height: 1.8;
} }
.highlight { .highlight {
line-height: 1.5; line-height: 1.5;
} }
.markdown img { .markdown img {
vertical-align: middle; vertical-align: middle;
max-width: 100%; max-width: 100%;
} }
.markdown h1 { .markdown h1 {
color: #404040; color: #404040;
font-weight: 500; font-weight: 500;
line-height: 40px; line-height: 40px;
margin-bottom: 24px; margin-bottom: 24px;
} }
.markdown h2, .markdown h2,
@@ -173,139 +178,139 @@
.markdown h4, .markdown h4,
.markdown h5, .markdown h5,
.markdown h6 { .markdown h6 {
color: #404040; color: #404040;
margin: 1.6em 0 0.6em 0; margin: 1.6em 0 0.6em 0;
font-weight: 500; font-weight: 500;
clear: both; clear: both;
} }
.markdown h1 { .markdown h1 {
font-size: 28px; font-size: 28px;
} }
.markdown h2 { .markdown h2 {
font-size: 22px; font-size: 22px;
} }
.markdown h3 { .markdown h3 {
font-size: 16px; font-size: 16px;
} }
.markdown h4 { .markdown h4 {
font-size: 14px; font-size: 14px;
} }
.markdown h5 { .markdown h5 {
font-size: 12px; font-size: 12px;
} }
.markdown h6 { .markdown h6 {
font-size: 12px; font-size: 12px;
} }
.markdown hr { .markdown hr {
height: 1px; height: 1px;
border: 0; border: 0;
background: #e9e9e9; background: #e9e9e9;
margin: 16px 0; margin: 16px 0;
clear: both; clear: both;
} }
.markdown p { .markdown p {
margin: 1em 0; margin: 1em 0;
} }
.markdown>p, .markdown > p,
.markdown>blockquote, .markdown > blockquote,
.markdown>.highlight, .markdown > .highlight,
.markdown>ol, .markdown > ol,
.markdown>ul { .markdown > ul {
width: 80%; width: 80%;
} }
.markdown ul>li { .markdown ul > li {
list-style: circle; list-style: circle;
} }
.markdown>ul li, .markdown > ul li,
.markdown blockquote ul>li { .markdown blockquote ul > li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
.markdown>ul li p, .markdown > ul li p,
.markdown>ol li p { .markdown > ol li p {
margin: 0.6em 0; margin: 0.6em 0;
} }
.markdown ol>li { .markdown ol > li {
list-style: decimal; list-style: decimal;
} }
.markdown>ol li, .markdown > ol li,
.markdown blockquote ol>li { .markdown blockquote ol > li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
.markdown code { .markdown code {
margin: 0 3px; margin: 0 3px;
padding: 0 5px; padding: 0 5px;
background: #eee; background: #eee;
border-radius: 3px; border-radius: 3px;
} }
.markdown strong, .markdown strong,
.markdown b { .markdown b {
font-weight: 600; font-weight: 600;
} }
.markdown>table { .markdown > table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0px; border-spacing: 0px;
empty-cells: show; empty-cells: show;
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
width: 95%; width: 95%;
margin-bottom: 24px; margin-bottom: 24px;
} }
.markdown>table th { .markdown > table th {
white-space: nowrap; white-space: nowrap;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
} }
.markdown>table th, .markdown > table th,
.markdown>table td { .markdown > table td {
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
padding: 8px 16px; padding: 8px 16px;
text-align: left; text-align: left;
} }
.markdown>table th { .markdown > table th {
background: #F7F7F7; background: #f7f7f7;
} }
.markdown blockquote { .markdown blockquote {
font-size: 90%; font-size: 90%;
color: #999; color: #999;
border-left: 4px solid #e9e9e9; border-left: 4px solid #e9e9e9;
padding-left: 0.8em; padding-left: 0.8em;
margin: 1em 0; margin: 1em 0;
} }
.markdown blockquote p { .markdown blockquote p {
margin: 0; margin: 0;
} }
.markdown .anchor { .markdown .anchor {
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
margin-left: 8px; margin-left: 8px;
} }
.markdown .waiting { .markdown .waiting {
color: #ccc; color: #ccc;
} }
.markdown h1:hover .anchor, .markdown h1:hover .anchor,
@@ -314,27 +319,26 @@
.markdown h4:hover .anchor, .markdown h4:hover .anchor,
.markdown h5:hover .anchor, .markdown h5:hover .anchor,
.markdown h6:hover .anchor { .markdown h6:hover .anchor {
opacity: 1; opacity: 1;
display: inline-block; display: inline-block;
} }
.markdown>br, .markdown > br,
.markdown>p>br { .markdown > p > br {
clear: both; clear: both;
} }
.hljs { .hljs {
display: block; display: block;
background: white; background: white;
padding: 0.5em; padding: 0.5em;
color: #333333; color: #333333;
overflow-x: auto; overflow-x: auto;
} }
.hljs-comment, .hljs-comment,
.hljs-meta { .hljs-meta {
color: #969896; color: #969896;
} }
.hljs-string, .hljs-string,
@@ -343,29 +347,29 @@
.hljs-strong, .hljs-strong,
.hljs-emphasis, .hljs-emphasis,
.hljs-quote { .hljs-quote {
color: #df5000; color: #df5000;
} }
.hljs-keyword, .hljs-keyword,
.hljs-selector-tag, .hljs-selector-tag,
.hljs-type { .hljs-type {
color: #a71d5d; color: #a71d5d;
} }
.hljs-literal, .hljs-literal,
.hljs-symbol, .hljs-symbol,
.hljs-bullet, .hljs-bullet,
.hljs-attribute { .hljs-attribute {
color: #0086b3; color: #0086b3;
} }
.hljs-section, .hljs-section,
.hljs-name { .hljs-name {
color: #63a35c; color: #63a35c;
} }
.hljs-tag { .hljs-tag {
color: #333333; color: #333333;
} }
.hljs-title, .hljs-title,
@@ -374,21 +378,21 @@
.hljs-selector-class, .hljs-selector-class,
.hljs-selector-attr, .hljs-selector-attr,
.hljs-selector-pseudo { .hljs-selector-pseudo {
color: #795da3; color: #795da3;
} }
.hljs-addition { .hljs-addition {
color: #55a532; color: #55a532;
background-color: #eaffea; background-color: #eaffea;
} }
.hljs-deletion { .hljs-deletion {
color: #bd2c00; color: #bd2c00;
background-color: #ffecec; background-color: #ffecec;
} }
.hljs-link { .hljs-link {
text-decoration: underline; text-decoration: underline;
} }
/* 代码高亮 */ /* 代码高亮 */
@@ -399,85 +403,84 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
* Based on dabblet (http://dabblet.com) * Based on dabblet (http://dabblet.com)
* @author Lea Verou * @author Lea Verou
*/ */
code[class*="language-"], code[class*='language-'],
pre[class*="language-"] { pre[class*='language-'] {
color: black; color: black;
background: none; background: none;
text-shadow: 0 1px white; text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left; text-align: left;
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: normal;
line-height: 1.5; line-height: 1.5;
-moz-tab-size: 4; -moz-tab-size: 4;
-o-tab-size: 4; -o-tab-size: 4;
tab-size: 4; tab-size: 4;
-webkit-hyphens: none; -webkit-hyphens: none;
-moz-hyphens: none; -moz-hyphens: none;
-ms-hyphens: none; -ms-hyphens: none;
hyphens: none; hyphens: none;
} }
pre[class*="language-"]::-moz-selection, pre[class*='language-']::-moz-selection,
pre[class*="language-"] ::-moz-selection, pre[class*='language-'] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*='language-']::-moz-selection,
code[class*="language-"] ::-moz-selection { code[class*='language-'] ::-moz-selection {
text-shadow: none; text-shadow: none;
background: #b3d4fc; background: #b3d4fc;
} }
pre[class*="language-"]::selection, pre[class*='language-']::selection,
pre[class*="language-"] ::selection, pre[class*='language-'] ::selection,
code[class*="language-"]::selection, code[class*='language-']::selection,
code[class*="language-"] ::selection { code[class*='language-'] ::selection {
text-shadow: none; text-shadow: none;
background: #b3d4fc; background: #b3d4fc;
} }
@media print { @media print {
code[class*='language-'],
code[class*="language-"], pre[class*='language-'] {
pre[class*="language-"] { text-shadow: none;
text-shadow: none; }
}
} }
/* Code blocks */ /* Code blocks */
pre[class*="language-"] { pre[class*='language-'] {
padding: 1em; padding: 1em;
margin: .5em 0; margin: 0.5em 0;
overflow: auto; overflow: auto;
} }
:not(pre)>code[class*="language-"], :not(pre) > code[class*='language-'],
pre[class*="language-"] { pre[class*='language-'] {
background: #f5f2f0; background: #f5f2f0;
} }
/* Inline code */ /* Inline code */
:not(pre)>code[class*="language-"] { :not(pre) > code[class*='language-'] {
padding: .1em; padding: 0.1em;
border-radius: .3em; border-radius: 0.3em;
white-space: normal; white-space: normal;
} }
.token.comment, .token.comment,
.token.prolog, .token.prolog,
.token.doctype, .token.doctype,
.token.cdata { .token.cdata {
color: slategray; color: slategray;
} }
.token.punctuation { .token.punctuation {
color: #999; color: #999;
} }
.namespace { .namespace {
opacity: .7; opacity: 0.7;
} }
.token.property, .token.property,
@@ -487,7 +490,7 @@ pre[class*="language-"] {
.token.constant, .token.constant,
.token.symbol, .token.symbol,
.token.deleted { .token.deleted {
color: #905; color: #905;
} }
.token.selector, .token.selector,
@@ -496,7 +499,7 @@ pre[class*="language-"] {
.token.char, .token.char,
.token.builtin, .token.builtin,
.token.inserted { .token.inserted {
color: #690; color: #690;
} }
.token.operator, .token.operator,
@@ -504,36 +507,36 @@ pre[class*="language-"] {
.token.url, .token.url,
.language-css .token.string, .language-css .token.string,
.style .token.string { .style .token.string {
color: #9a6e3a; color: #9a6e3a;
background: hsla(0, 0%, 100%, .5); background: hsla(0, 0%, 100%, 0.5);
} }
.token.atrule, .token.atrule,
.token.attr-value, .token.attr-value,
.token.keyword { .token.keyword {
color: #07a; color: #07a;
} }
.token.function, .token.function,
.token.class-name { .token.class-name {
color: #DD4A68; color: #dd4a68;
} }
.token.regex, .token.regex,
.token.important, .token.important,
.token.variable { .token.variable {
color: #e90; color: #e90;
} }
.token.important, .token.important,
.token.bold { .token.bold {
font-weight: bold; font-weight: bold;
} }
.token.italic { .token.italic {
font-style: italic; font-style: italic;
} }
.token.entity { .token.entity {
cursor: help; cursor: help;
} }
miniprogram/constants/words-svg-3000.json → miniprogram/constants/words-svg-2223.json
View File
miniprogram/constants/words-svg-5000.json
Executable
+58609
View File
File diff suppressed because it is too large Load Diff
miniprogram/constants/words-svg-all.json
+59678 -59679
View File
File diff suppressed because it is too large Load Diff
miniprogram/constants/words-svg-common.json
+22241
View File
File diff suppressed because it is too large Load Diff
miniprogram/pages/copyBook/copyBook.ts
+116 -118
View File
@@ -2,6 +2,7 @@ import WordDrawService from '../../service/wordDrawService';
import { checkAndSaveImage } from '../../utils/saveImage'; import { checkAndSaveImage } from '../../utils/saveImage';
import { PAPER_SIZE } from '../../constants/colors'; import { PAPER_SIZE } from '../../constants/colors';
import { getWordsSvgData } from '../../utils/getWordsSvgJson'; import { getWordsSvgData } from '../../utils/getWordsSvgJson';
import { CharacterItem } from '../../types/characterType';
Page({ Page({
canvas: null as Canvas | null, canvas: null as Canvas | null,
@@ -33,16 +34,18 @@ Page({
async onReady() { async onReady() {
await this.setCanvasBoxSize(); await this.setCanvasBoxSize();
this.initCanvas() await this.initCanvas()
}, },
async loadSvgWords() { async loadSvgWords() {
try { try {
wx.showToast({ title: '加载字体中...', icon: 'loading' }); wx.showToast({ title: '加载字体中...', icon: 'loading' });
console.log("loadSvgWords");
// 使用带缓存的SVG汉字数据获取函数 // 使用带缓存的SVG汉字数据获取函数
const svgWordsData = await getWordsSvgData(); const svgWordsData = await getWordsSvgData();
console.log("svgWordsData", svgWordsData);
this.svgWords = svgWordsData; this.svgWords = svgWordsData;
wx.hideToast(); wx.hideToast();
@@ -50,7 +53,7 @@ Page({
const { words } = this.data as any; const { words } = this.data as any;
if (words && words.length > 0) { if (words && words.length > 0) {
this.drawPracticeSheet().catch(console.error); this.renderPracticeContent().catch(console.error);
} }
} catch (error) { } catch (error) {
console.error('加载SVG汉字数据失败:', error); console.error('加载SVG汉字数据失败:', error);
@@ -86,73 +89,37 @@ Page({
const { words } = this.data as any; const { words } = this.data as any;
// 1. 先检查原来已有的汉字是否超过11个 // 1. 解析新输入的汉字
if (words.length >= 11) {
wx.showToast({
title: '最多只能添加 11 个字哦！',
icon: 'none',
duration: 2000,
});
return;
}
// 2. 解析新输入的汉字
const newChars = this.splitToSingleChars(text); const newChars = this.splitToSingleChars(text);
if (newChars.length === 0) { if (newChars.length === 0) {
wx.showToast({ title: '请输入有效汉字', icon: 'none' }); wx.showToast({ title: '请输入有效汉字', icon: 'none' });
return; return;
} }
// 3. 保留原有汉字，追加新汉字（去重处理） // 2. 检查是否超过限制
const existingWords = new Set(words); // 用于快速查找重复 if (words.length + newChars.length > 11) {
const updatedWords: string[] = [...words]; // 保留原有汉字 wx.showToast({
let addedCount = 0; title: `最多只能添加 11 个字，当前已有 ${words.length} 个，输入了 ${newChars.length} 个`,
let skippedCount = 0; icon: 'none',
duration: 3000,
for (const char of newChars) { });
// 检查是否已达到11个字的限制 return;
if (updatedWords.length >= 11) {
break;
}
// 检查是否已存在（去重）
if (existingWords.has(char)) {
skippedCount++;
continue;
}
// 添加新汉字
updatedWords.push(char);
existingWords.add(char);
addedCount++;
} }
// 3. 直接追加新汉字
const updatedWords = [...words, ...newChars];
// 4. 更新数据并提示 // 4. 更新数据并提示
this.setData({ words: updatedWords }, () => { this.setData({ words: updatedWords }, () => {
this.drawPracticeSheet().catch(console.error); this.renderPracticeContent().catch(console.error);
}); });
// 5. 显示添加结果提示 // 5. 显示添加结果提示
if (addedCount > 0) { wx.showToast({
let message = `成功添加 ${addedCount} 个汉字`; title: `成功添加 ${newChars.length} 个汉字`,
if (skippedCount > 0) { icon: 'none',
message += `，跳过 ${skippedCount} 个重复汉字`; duration: 2000,
} });
if (updatedWords.length >= 11) {
message += '，已达到最大限制';
}
wx.showToast({
title: message,
icon: 'none',
duration: 2000,
});
} else if (skippedCount > 0) {
wx.showToast({
title: `所有汉字都已存在，跳过 ${skippedCount} 个重复汉字`,
icon: 'none',
duration: 2000,
});
}
}, },
// 选择面板 // 选择面板
@@ -165,7 +132,11 @@ Page({
onChangeWord(e: any) { onChangeWord(e: any) {
const selectedWords = e.detail.selectedWords as string[]; const selectedWords = e.detail.selectedWords as string[];
const newWords = [...this.data.words, ...selectedWords]; const newWords = [...this.data.words, ...selectedWords];
this.setData({ words: newWords, showSelectWordPopup: false }, () => this.drawPracticeSheet().catch(console.error)); this.setData({ words: newWords, showSelectWordPopup: false }, () => {
if (newWords && newWords.length > 0) {
this.renderPracticeContent().catch(console.error);
}
});
}, },
// 删除 // 删除
@@ -173,8 +144,7 @@ Page({
const { key } = e.detail; const { key } = e.detail;
const { words } = this.data as any; const { words } = this.data as any;
const next = words.filter((_: string, index: number) => index !== key); const next = words.filter((_: string, index: number) => index !== key);
console.log("-nextnext-----:", next); this.setData({ words: next }, () => this.renderPracticeContent().catch(console.error));
this.setData({ words: next }, () => this.drawPracticeSheet().catch(console.error));
}, },
// 校验 & 分割 // 校验 & 分割
@@ -188,6 +158,7 @@ Page({
return matches || []; return matches || [];
}, },
setCanvasBoxSize() { setCanvasBoxSize() {
const query = wx.createSelectorQuery(); const query = wx.createSelectorQuery();
query query
@@ -202,86 +173,113 @@ Page({
}) })
.exec(); .exec();
}, },
initCanvas() { async initCanvas() {
// 然后初始化canvas return new Promise<void>((resolve) => {
wx.createSelectorQuery() // 然后初始化canvas
.select('#canvasContent') wx.createSelectorQuery()
.fields({ .select('#canvasContent')
node: true, .fields({
size: true, node: true,
}) size: true,
.exec((res) => { })
if (res[0] && res[0].node) { .exec(async (res) => {
const canvas = res[0].node; if (res[0] && res[0].node) {
const ctx = canvas.getContext('2d'); const canvas = res[0].node;
if (ctx) { const ctx = canvas.getContext('2d');
this.canvas = canvas; if (ctx) {
this.ctx = ctx; this.canvas = canvas;
this.wordDrawService = new WordDrawService(canvas, ctx, { this.ctx = ctx;
appName: '涂鸦丫小程序', this.wordDrawService = new WordDrawService(canvas, ctx, {
appHint: '练字|识字|涂色｜打印', appName: '涂鸦丫小程序',
title: '田字格 练 字 贴', appHint: '练字|识字|涂色｜打印',
subTitle: '按笔画临摹练习' title: '田字格 练 字 贴',
}); subTitle: '按笔画临摹练习'
this.drawPracticeSheet().catch(console.error); });
// 初始化时只绘制页眉和布局
await this.wordDrawService.drawLayout();
// 如果有汉字数据，绘制练字内容
const { words } = this.data as any;
if (words && words.length > 0) {
await this.renderPracticeContent();
}
resolve();
}
} }
} });
}); });
}, },
// 绘制练字贴 // 绘制练字内容（只绘制田字格和汉字内容）
async drawPracticeSheet() { async renderPracticeContent() {
if (!this.canvas || !this.wordDrawService) { if (!this.canvas || !this.wordDrawService) {
this.initCanvas(); await this.initCanvas();
return;
} }
const { words } = this.data as any; const { words } = this.data as any;
// 构建汉字笔画数据 console.log("renderPracticeContent words", words);
const wordsMap: Record<string, string[]> | null = this.checkWords(words);
await this.wordDrawService?.draw(wordsMap || {}); if (!words || words.length === 0) {
this.wordDrawService.drawContentEmpty();
return;
}
// 检查汉字是否支持
const supportedWords = this.getSupportedWords(words);
if (supportedWords.length === 0) {
wx.showToast({ title: '暂不支持这些汉字', icon: 'none' });
this.wordDrawService.drawContentEmpty();
return;
}
// 处理布局和生成练字数据
const characterData = this.processCharacterLayout(supportedWords);
this.wordDrawService.drawPracticeContent(characterData);
}, },
checkWords(words: string[]): Record<string, string[]> | null {
// 构建汉字笔画数据（已去重） /** 检查汉字是否支持，返回支持的汉字列表 */
const wordsMap: Record<string, string[]> = {}; getSupportedWords(words: string[]): string[] {
const supportedWords: string[] = []; return words.filter(word => this.svgWords[word]);
},
/** 处理汉字布局，生成练字数据 */
processCharacterLayout(words: string[]): CharacterItem[] {
const maxRow = 11, maxCol = 9;
let rowIndex = 0;
const characterData: CharacterItem[] = [];
const boundaryWords: string[] = [];
// 按顺序处理每个汉字 // 按顺序处理每个汉字
words.forEach((word: string) => { words.forEach((word: string) => {
if (this.svgWords[word]) { const strokes = this.svgWords[word];
wordsMap[word] = this.svgWords[word];
supportedWords.push(word);
}
});
if (supportedWords.length === 0) {
wx.showToast({ title: '暂不支持这些汉字', icon: 'none' });
return null;
}
const maxRow = 11, maxCol = 9;
let rowIndex = 0;
const characters = Object.keys(wordsMap);
const newWorksMap: Record<string, string[]> = {};
const boundaryWords: string[] = []
characters.forEach((char) => {
const strokes = wordsMap[char] || [];
const strokeCount = strokes.length; const strokeCount = strokes.length;
const totalCells = 1 + strokeCount + 2; const totalCells = 1 + strokeCount + 2; // 预览格 + 练习格 + 空白格
const totalRows = Math.ceil(totalCells / maxCol); const totalRows = Math.ceil(totalCells / maxCol);
rowIndex += totalRows; rowIndex += totalRows;
if (rowIndex <= maxRow) { if (rowIndex <= maxRow) {
newWorksMap[char] = wordsMap[char]; characterData.push({ character: word, strokes });
} else { } else {
boundaryWords.push(char) boundaryWords.push(word);
} }
}); });
// 提示超出页面的汉字
if (boundaryWords.length > 0) { if (boundaryWords.length > 0) {
wx.showToast({ title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`, icon: 'none' }); wx.showToast({
title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`,
icon: 'none'
});
} }
return newWorksMap;
return characterData;
}, },
// 下载打印练字贴 // 下载打印练字贴
exportToPrint() { exportToPrint() {
const { words } = this.data as any; const { words } = this.data as any;
miniprogram/pages/copyBook/copyBook.wxml
+1
View File
@@ -20,6 +20,7 @@
wx:for-item="word" wx:for-item="word"
wx:for-index="index" wx:for-index="index"
word="{{word}}" word="{{word}}"
key="{{index}}"
bind:onDelete="deleteWordCard" bind:onDelete="deleteWordCard"
bind:onColorTap="onColorTap" /> bind:onColorTap="onColorTap" />
</view> </view>
miniprogram/pages/index/index.less
+173
View File
@@ -120,6 +120,179 @@ page {
flex-direction: row; flex-direction: row;
justify-content: space-between; 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-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20rpx;
}
.template-item {
background: #FFFFFF;
border: 2rpx solid #E8E8E8;
border-radius: 16rpx;
padding: 16rpx;
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
&:active {
transform: scale(0.95);
}
&.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;
color: #FFFFFF;
font-size: 14rpx;
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;
}
}
}
.template-name {
font-size: 22rpx;
color: #666666;
text-align: center;
font-weight: 500;
.template-item.active & {
color: #93D333;
font-weight: 600;
}
}
}
}
} }
miniprogram/pages/index/index.ts
+17
View File
@@ -18,6 +18,7 @@ Page({
currentColor: '', currentColor: '',
showIntroductionPopup: false, showIntroductionPopup: false,
showSelectWordPopup: false, // 选择文字弹窗 showSelectWordPopup: false, // 选择文字弹窗
selectedTemplate: 'grid', // 选中的模板类型
env: 'release', env: 'release',
isPCDevtool: false, isPCDevtool: false,
}, },
@@ -375,4 +376,20 @@ Page({
url: '/pages/debug/debug', url: '/pages/debug/debug',
}); });
}, },
// 模板选择事件
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();
}
},
}); });
miniprogram/pages/index/index.wxml
+95
View File
@@ -59,6 +59,101 @@
清空 清空
</toy-button> </toy-button>
</view> </view>
<!-- 趣味模板选择区域 -->
<view class="template-section">
<view class="template-title">选择涂色模板</view>
<view class="template-grid">
<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>
<view class="template-name">网格排列</view>
</view>
<view
class="template-item {{selectedTemplate === 'circle' ? 'active' : ''}}"
data-template="circle"
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>
<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>
</view>
</view>
</view> </view>
<view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}"> <view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
<text class="wrapper-title">预览打印效果</text> <text class="wrapper-title">预览打印效果</text>
miniprogram/service/wordDrawService.ts
+43 -21
View File
@@ -1,5 +1,6 @@
import { PAPER_SIZE } from '../constants/colors'; import { PAPER_SIZE } from '../constants/colors';
import { getMiniCodeImage, getImage } from '../utils/index'; import { getMiniCodeImage, getImage } from '../utils/index';
import { CharacterItem } from '../types/characterType';
/** /**
* 仅支持 M/L/Z 的简单 SVG 路径解析与绘制 * 仅支持 M/L/Z 的简单 SVG 路径解析与绘制
@@ -246,10 +247,9 @@ class WordDrawService {
} }
/** /**
* 生成练字帖 * 绘制页眉和基础布局
* @param wordsMap 形如 { "其": ["M.. L.. Z", ...], ... }，不超过 10 个汉字
*/ */
async draw(wordsMap: Record<string, string[]>) { async drawLayout() {
this.setPrintConfig(); this.setPrintConfig();
this.clear(); this.clear();
this.setPaper(); this.setPaper();
@@ -260,9 +260,35 @@ class WordDrawService {
} else { } else {
await this.drawMiniHeader(); await this.drawMiniHeader();
} }
}
// 页眉绘制完成后，再绘制内容 async drawContentEmpty() {
this.drawContent(wordsMap); this.clearContentArea();
this.drawContent(null);
}
/**
* 绘制田字格和练字内容
* @param wordsMap 形如 { "其": ["M.. L.. Z", ...], ... }，不超过 10 个汉字
*/
drawPracticeContent(characters: CharacterItem[]) {
// 清空内容区域（页眉以下的部分）
this.clearContentArea();
// 绘制田字格和练字内容
this.drawContent(characters);
}
/**
* 清空内容区域（页眉以下的部分）
*/
private clearContentArea() {
const { ctx, canvas } = this;
const contentStartY = this.currentY;
// 清空页眉以下的所有内容
ctx.fillStyle = '#fff';
ctx.fillRect(0, contentStartY, canvas.width, canvas.height - contentStartY);
} }
async drawHeader() { async drawHeader() {
@@ -353,10 +379,8 @@ class WordDrawService {
* rowGap 作用解释： * rowGap 作用解释：
* rowGap（行间距）用于田字格竖直方向（每一行田字格之间的间隔）的初始最小值。它防止行与行的田字格上下贴得太紧，增加一定的可视呼吸空间。之后同样会结合剩余空间动态调整为实际间距 actualRowGap。 * rowGap（行间距）用于田字格竖直方向（每一行田字格之间的间隔）的初始最小值。它防止行与行的田字格上下贴得太紧，增加一定的可视呼吸空间。之后同样会结合剩余空间动态调整为实际间距 actualRowGap。
*/ */
drawContent(wordsMap: Record<string, string[]>) { drawContent(characterData: CharacterItem[] | null) {
const { canvas, ctx } = this; const { canvas, ctx } = this;
const characters = Object.keys(wordsMap).slice(0, 10);
// 布局参数 // 布局参数
const topGap = 50; // 与页眉分割线的距离 const topGap = 50; // 与页眉分割线的距离
@@ -398,11 +422,11 @@ class WordDrawService {
columnNumber columnNumber
}); });
if (characters.length > 0) { if (characterData && characterData.length > 0) {
// 第二阶段：绘制练字内容 // 第二阶段：绘制练字内容
this.drawPracticeContent({ this.drawPracticeContentInternal({
ctx, ctx,
wordsMap, characterData,
startX: leftMargin, startX: leftMargin,
startY: contentTop, startY: contentTop,
cellSize, cellSize,
@@ -464,9 +488,9 @@ class WordDrawService {
/** /**
* 绘制练字内容（参考 template.html 的实现） * 绘制练字内容（参考 template.html 的实现）
*/ */
drawPracticeContent({ drawPracticeContentInternal({
ctx, ctx,
wordsMap, characterData,
startX, startX,
startY, startY,
cellSize, cellSize,
@@ -475,7 +499,7 @@ class WordDrawService {
columnNumber columnNumber
}: { }: {
ctx: RenderingContext; ctx: RenderingContext;
wordsMap: Record<string, string[]>; characterData: CharacterItem[];
startX: number; startX: number;
startY: number; startY: number;
cellSize: number; cellSize: number;
@@ -483,19 +507,17 @@ class WordDrawService {
rowGap: number; rowGap: number;
columnNumber: number; columnNumber: number;
}) { }) {
const characters = Object.keys(wordsMap);
const reservedCells = 2; const reservedCells = 2;
let rowIndex = 0, columnIndex = 0; let rowIndex = 0, columnIndex = 0;
// console.log('开始绘制练字内容，汉字数量:', characters.length); // console.log('开始绘制练字内容，汉字数量:', characters.length);
characters.forEach((uniqueKey, charIndex) => { characterData.forEach((item, index) => {
const strokes = wordsMap[uniqueKey] || []; const character = item.character;
const strokes = item.strokes;
const strokeCount = strokes.length; const strokeCount = strokes.length;
// 从uniqueKey中提取原始汉字（去掉后缀）
const originalChar = uniqueKey.split('_')[0];
console.log(`绘制第 ${charIndex + 1} 个汉字 "${originalChar}"，笔画数: ${strokeCount}`); console.log(`绘制第 ${index + 1} 个汉字 "${character}"，笔画数: ${strokeCount}`);
// 1. 预览格：显示完整汉字（黑色） // 1. 预览格：显示完整汉字（黑色）
this.drawPreviewCell({ this.drawPreviewCell({
@@ -538,7 +560,7 @@ class WordDrawService {
} }
// 4. 强制下一个汉字换行到新行的第一个田字格 // 4. 强制下一个汉字换行到新行的第一个田字格
if (charIndex < characters.length - 1) { // 不是最后一个汉字 if (index < characterData.length - 1) { // 不是最后一个汉字
rowIndex = rowIndex + 1; rowIndex = rowIndex + 1;
columnIndex = 0; columnIndex = 0;
// console.log(`汉字 "${char}" 绘制完成，强制换行到新行，下一个汉字从 rowIndex: ${rowIndex}, columnIndex: ${columnIndex} 开始`); // console.log(`汉字 "${char}" 绘制完成，强制换行到新行，下一个汉字从 rowIndex: ${rowIndex}, columnIndex: ${columnIndex} 开始`);
miniprogram/types/characterType.ts
+4
View File
@@ -0,0 +1,4 @@
export interface CharacterItem {
character: string;
strokes: string[];
}
miniprogram/utils/getWordsSvgJson.ts
+2 -1
View File
@@ -6,7 +6,8 @@ import { getJson } from './http';
const CACHE_CONFIG = { const CACHE_CONFIG = {
key: 'svgWordsData', // 缓存键名 key: 'svgWordsData', // 缓存键名
expireDays: 7, // 缓存过期天数 expireDays: 7, // 缓存过期天数
url: 'https://www.ice-sea.com/doodle/words-svg/words-svg-3000.json' // 远程数据地址 // url: 'https://cdn.joeyone.cn/words-svg-all.json' // 远程数据地址
url: 'https://cdn.joeyone.cn/words-svg-3000.json' // 远程数据地址
}; };
/** /**