R524809
230 lines
5.6 KiB
HTML
Executable File
230 lines
5.6 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>田字格字帖生成器</title>
|
|
<style>
|
|
body,
|
|
div,
|
|
p,
|
|
ul,
|
|
li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
div {
|
|
width: 938px;
|
|
margin: 0 auto;
|
|
padding-left: 2px;
|
|
}
|
|
|
|
li {
|
|
float: left;
|
|
width: 80px;
|
|
height: 80px;
|
|
font-family: "楷体", "楷体_gb2312";
|
|
font-size: 58px;
|
|
text-align: center;
|
|
line-height: 85px;
|
|
background: url(images/bg12.jpg);
|
|
margin: 4px 0px 5px -2px;
|
|
color: #b8b8b8;
|
|
}
|
|
|
|
li.f {
|
|
color: #000;
|
|
/**margin-left: -0px*/
|
|
}
|
|
|
|
li.svg {
|
|
line-height: 72px;
|
|
}
|
|
|
|
li svg {
|
|
margin: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.afterpage {
|
|
page-break-after: always;
|
|
}
|
|
|
|
@media print {
|
|
li {
|
|
background: url(images/bg12.jpg);
|
|
}
|
|
|
|
.afterpage {
|
|
page-break-after: always;
|
|
}
|
|
|
|
.noprint {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<div class="noprint">
|
|
<textarea id="to_print" style='margin: 0px; width: 930px; height: 175px'></textarea>
|
|
<div style='align-items:center; margin: 0px; width: 930px; height: 20px'>
|
|
<input type="submit" onclick='onclick_gen();' value="生成" />
|
|
<input type="submit" onclick='window.print();' value="打印" />
|
|
</div>
|
|
</div>
|
|
<ul id="u_printf">
|
|
</ul>
|
|
</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"> </li>';
|
|
let empty_li2 = '';
|
|
// 生成11个空白格子，用于填充到每行末尾（每行总共12个格子）
|
|
for (let i = 0; i < 11; i++) {
|
|
empty_li2 += "<li> </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; // 如果没有找到笔画数据，直接返回
|
|
}
|
|
|
|
len = ds.length; // 笔画总数
|
|
f_path = ""; // 完整路径字符串
|
|
|
|
// 遍历所有笔画，生成完整的SVG路径
|
|
for (let j = 0; j < len; j++) {
|
|
// 将每个笔画路径添加到完整路径中，使用黑色样式
|
|
f_path += first_paths.replace(d_key, ds[j]);
|
|
}
|
|
|
|
// 将完整路径插入到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; // 如果没有找到笔画数据，直接返回
|
|
}
|
|
|
|
len = ds.length; // 笔画总数
|
|
let bihua_li = ""; // 练习格HTML字符串
|
|
let s_path = ""; // 当前路径字符串
|
|
|
|
// 生成逐笔画练习格：每个格子显示到当前笔画为止的汉字
|
|
for (let bihua = 0; bihua < len; bihua++) {
|
|
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 = ""; // 句子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());
|
|
|
|
// 将生成的HTML插入到页面中
|
|
u_printf.innerHTML = lis;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |