feat: 新增一些图片

2025-12-15 17:51:32 +08:00
parent fefe437f0f
commit 0e85f44fa6
33 changed files with 0 additions and 75167 deletions
@@ -1,230 +0,0 @@
 <!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">&nbsp;</li>';
 		let empty_li2 = '';
 		// 生成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; // 如果没有找到笔画数据，直接返回
 			}
 			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>