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-17 17:48:34 +08:00
parent 7ac81eb961
commit 2734b9de9e
18 changed files with 16428 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/demo/template.html
+95 -21
View File
@@ -56,9 +56,11 @@
li {
background: url(images/bg12.jpg);
}
.afterpage {
page-break-after: always;
}
.noprint {
display: none;
}
@@ -80,76 +82,148 @@
</div>
<script id="myword" charset="UTF-8" src="mwords.json"></script>
<script>
// 测试输出：打印汉字"舨"的笔画数据
console.log(words["舨"]);
// ========== 模板定义 ==========
// SVG田字格模板：每个格子包含一个54x54的SVG画布
let template_li = '<li class="svg"><svg width="54" height="54" version="1.1" xmlns="http://www.w3.org/2000/svg">##paths##</svg></li>';
// 空白格子模板：用于填充行末
let empty_li1 = '<li class="f">&nbsp;</li>';
let empty_li2 = '';
for (let i = 0; i < 11; i++) { empty_li2 += "<li>&nbsp;</li>" }
let first_paths = '<path d="##path_d##" style="fill:rgb(0,0,0);stroke:rgb(0,0,0);" stroke-width="1.5"></path>';
let second_paths = '<path d="##path_d##" style="fill:rgb(184,184,184);stroke:rgb(184,184,184);" stroke-width="1.6"></path>';
second_paths = '<path d="##path_d##" style="fill:rgb(184,184,184);stroke:#999;" stroke-width="1.6"></path>';
let d_key = '##path_d##';
let p_key = '##paths##';
u_printf.innerHTML = "";
let preview = (c) => {
// 生成11个空白格子，用于填充到每行末尾（每行总共12个格子）
for (let i = 0; i < 11; i++) {
empty_li2 += "<li>&nbsp;</li>"
}
// 笔画路径模板定义
// 完整汉字路径：黑色填充和描边，用于预览格
let first_paths = '<path d="##path_d##" style="fill:rgb(0,0,0);stroke:rgb(0,0,0);" stroke-width="1.5"></path>';
// 练习汉字路径：灰色填充和描边，用于练习格
let second_paths = '<path d="##path_d##" style="fill:rgb(184,184,184);stroke:#999;" stroke-width="1.6"></path>';
// 占位符定义
let d_key = '##path_d##'; // 笔画路径占位符
let p_key = '##paths##'; // SVG路径组占位符
// 清空输出区域
u_printf.innerHTML = "";
// ========== 核心函数定义 ==========
/**
* 生成汉字的预览格（完整汉字显示）
* @param {string} c - 汉字字符
* @returns {string} - 预览格的HTML
*/
let preview = (c) => {
let pre_li = "";
// 获取汉字的笔画数据
ds = words[c];
if (!ds) {
return;
return; // 如果没有找到笔画数据，直接返回
}
len = ds.length;
f_path = "";
len = ds.length; // 笔画总数
f_path = ""; // 完整路径字符串
// 遍历所有笔画，生成完整的SVG路径
for (let j = 0; j < len; j++) {
// 将每个笔画路径添加到完整路径中，使用黑色样式
f_path += first_paths.replace(d_key, ds[j]);
}
pre_li = template_li.replace(p_key, f_path);;
// 将完整路径插入到SVG模板中
pre_li = template_li.replace(p_key, f_path);
return pre_li;
};
/**
* 生成汉字的练习格（逐笔画显示）
* @param {string} c - 汉字字符
* @returns {string} - 练习格的HTML
*/
let practice = (c) => {
// 获取汉字的笔画数据
ds = words[c];
if (!ds) {
return;
return; // 如果没有找到笔画数据，直接返回
}
len = ds.length;
let bihua_li = "";
let s_path = "";
len = ds.length; // 笔画总数
let bihua_li = ""; // 练习格HTML字符串
let s_path = ""; // 当前路径字符串
// 生成逐笔画练习格：每个格子显示到当前笔画为止的汉字
for (let bihua = 0; bihua < len; bihua++) {
s_path = "";
s_path = ""; // 重置路径
// 累加从第1笔到当前笔画的所有路径
for (let i = 0; i <= bihua; i++) {
// 将每个笔画路径添加到当前路径中，使用灰色样式
s_path += second_paths.replace(d_key, ds[i]);
}
// 将当前路径插入到SVG模板中，生成一个练习格
bihua_li += template_li.replace(p_key, s_path);
}
// 填充剩余空白格：如果汉字笔画少于23个，用最后一个练习格填充
for (let i = 0; i < 23 - len; i++) {
bihua_li += template_li.replace(p_key, s_path);
}
// 添加行末填充：1个特殊空白格 + 11个普通空白格
bihua_li += empty_li1;
bihua_li += empty_li2;
return bihua_li;
}
/**
* 生成单个汉字的完整练字格（预览格 + 练习格）
* @param {string} c - 汉字字符
* @returns {string} - 完整练字格的HTML
*/
let print_char = (c) => {
// 组合预览格和练习格
return preview(c) + practice(c);
}
/**
* 生成整个句子的练字格
* @param {string} s - 汉字字符串
* @returns {string} - 整个句子的练字格HTML
*/
let print_sentence = (s) => {
sen_li = "";
sen_li = ""; // 句子HTML字符串
// 遍历每个汉字，生成对应的练字格
for (let i in s) {
sen_li += print_char(s[i]);
}
return sen_li;
}
/**
* 生成按钮点击事件处理函数
* 根据用户输入的文本生成练字贴
*/
onclick_gen = () => {
// 清空输出区域
u_printf.innerHTML = "";
lis = print_sentence(to_print.value.replace(/ /g,"").trim());
// 获取用户输入，去除空格并生成练字贴
lis = print_sentence(to_print.value.replace(/ /g, "").trim());
// 将生成的HTML插入到页面中
u_printf.innerHTML = lis;
}
</script>
</body>