字帖生成器
2024-08-31 21:33 muamaker 阅读(15) 评论(0) 编辑 收藏 举报
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } .header label{ margin-right: 10px; } .header input[type=number]{ height: 28px; } button{ margin-right: 10px; height: 32px; width: 128px; cursor: pointer; } .result_container { overflow: auto; width: 100%; max-height: 1200px; border: 1px solid #d9d9d9; box-sizing: border-box; padding: 15px; } .svg_page:not(:last-child) { page-break-after: always; } .svg_page { margin: 0 0 15px 0; padding: 0; overflow: hidden !important; page-break-inside: avoid; border: 1px solid #d9d9d9; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); } @page { margin: 0; padding: 0; } </style> <script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.0/dist/hanzi-writer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jQuery.print@1.5.1/jQuery.print.js"></script> </head> <body> <div class="header"> <div> <textarea id="input" cols="104" rows="10">静夜思 唐 - 李白 床前明月光,疑是地上霜。 举头望明月,低头思故乡。 </textarea> </div> <label>样例:<input id="example" type="color" value="#333333" /></label> <label>笔画:<input id="path" type="color" value="#f44336" /></label> <label>临摹:<input id="drawn" type="color" value="#9d9d9d" /></label> <label>临摹行数:<input id="row" type="number" value="2" /></label> <button id="start">生成</button> <button id="print">打印</button> </div> <div class="result_container" id="resultContainer"> <div id="allSvgContainer"> </div> </div> </body> <script> const box = document.querySelector("#allSvgContainer"); const createPage = () => { let svg_page = document.createElement('div'); svg_page.className = 'svg_page'; svg_page.style = 'width:calc( 210mm - 1px);height:calc( 297mm - 1px );'; svg_page.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="793.8" height="1122.66" viewBox="0 0 793.8 1122.66"><style>.nothing{}.simsun_font{font-family:simsun, SimSun, 宋体;}.simkai_font{font-family:simkai, KaiTi, 楷体;}.simhei_font{font-family:simhei, SimHei, 黑体;}.simli_font{font-family:simli, LiSu, 隶书;}.simyou_font{font-family:simyou, YouYuan, 幼圆;}.simzhangqingpingkai_font{font-family:simzhangqingpingkai;}.simyrdzst_font{font-family:simyrdzst;}.simfang_font{font-family:simfang, 仿宋;}.muyao-softbrush_font{font-family:muyao-softbrush;}.wqsft_1_1306613_10_font{font-family:wqsft_1_1306613_10;}.wqsxt-46231_font{font-family:wqsxt-46231;}.sjjnyyjyy_font{font-family:sjjnyyjyy;}.muyaopleased_font{font-family:muyaopleased;}.f38391d2eb9077fe72ae5d1c350fc0f6_font{font-family:f38391d2eb9077fe72ae5d1c350fc0f6;}.qiantubifengshouxieti_font{font-family:qiantubifengshouxieti;}.qiantuxianmoti_font{font-family:qiantuxianmoti;}.longcang-regular_font{font-family:longcang-regular;}.shoushuti_font{font-family:shoushuti;}.aajianhaoti_font{font-family:aajianhaoti;}.pfanhututi-regular_font{font-family:pfanhututi-regular;}.chillzhuo_font{font-family:chillzhuo;}.jasonhandwriting6-regular_font{font-family:jasonhandwriting6-regular;}.font_14b7a09dee57c514e9e58c58399dc05f_font{font-family:font_14b7a09dee57c514e9e58c58399dc05f;}.alexeicopperplate_font{font-family:alexeicopperplate;}.AlibabaSans_font{font-family:AlibabaSans;}.hengshui_font{font-family:hengshui;}.italic_font{font-family:italic, HengShuiTi;}.madina_font{font-family:madina;}.segoeprint_font{font-family:segoeprint;}.shuyaohengshui_font{font-family:shuyaohengshui;}.spencerianladyshandsw_font{font-family:spencerianladyshandsw;}.chong_xi_small_seal_font{font-family:Chong Xi Small Seal;}.border{stroke-width:1;stroke:#13B061;fill:none;}.sec_l{fill:none;stroke:#13B061;stroke-width:1;stroke-dasharray:1 2;}.sec_r{fill:none;stroke:#13B061;stroke-width:1;stroke-dasharray:1 2;}.sec_text{fill:#9D9D9D;text-anchor:middle;dominant-baseline:central;}.default_text{fill:#333333;text-anchor:middle;dominant-baseline:central;}.sec_pinyin{fill:#9D9D9D;font-family:simsun, SimSun, 宋体;text-anchor:middle;dominant-baseline:central;}.default_pinyin{fill:#333333;font-family:simsun, SimSun, 宋体;text-anchor:middle;dominant-baseline:central;}</style><rect width="718.1999999999999" height="1012.4499999999999" x="37.8" y="37.8" stroke-width="3" stroke="#13b061" fill="none"></rect><g id="SvgjsG5211"><g id="SvgjsG5210"><rect width="58.85" height="58.85" x="43.80" y="43.80" class="border"></rect><line x1="73.22" y1="43.80" x2="73.22" y2="102.65" class="sec_l"></line><line x1="43.80" y1="73.22" x2="102.65" y2="73.22" class="sec_l"></line></g><use href="#SvgjsG5210" x="58.85"></use><use href="#SvgjsG5210" x="117.70"></use><use href="#SvgjsG5210" x="176.55"></use><use href="#SvgjsG5210" x="235.40"></use><use href="#SvgjsG5210" x="294.25"></use><use href="#SvgjsG5210" x="353.10"></use><use href="#SvgjsG5210" x="411.95"></use><use href="#SvgjsG5210" x="470.80"></use><use href="#SvgjsG5210" x="529.65"></use><use href="#SvgjsG5210" x="588.50"></use><use href="#SvgjsG5210" x="647.35"></use></g><svg x="55.57" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="55.57" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="58.85"></use><svg x="55.57" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="114.42" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="117.70"></use><svg x="55.57" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="173.27" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="176.55"></use><svg x="55.57" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="232.12" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="235.40"></use><svg x="55.57" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="290.97" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="294.25"></use><svg x="55.57" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="349.82" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="353.10"></use><svg x="55.57" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="408.67" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="411.95"></use><svg x="55.57" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="467.52" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="470.80"></use><svg x="55.57" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="526.37" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="529.65"></use><svg x="55.57" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="585.22" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="588.50"></use><svg x="55.57" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="644.07" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="647.35"></use><svg x="55.57" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="702.92" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="706.20"></use><svg x="55.57" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="761.77" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="765.05"></use><svg x="55.57" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="820.62" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="823.90"></use><svg x="55.57" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="879.47" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="882.75"></use><svg x="55.57" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="938.32" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><use href="#SvgjsG5211" y="941.60"></use><svg x="55.57" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="114.42" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="173.27" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="232.12" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="290.97" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="349.82" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="408.67" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="467.52" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="526.37" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="585.22" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="644.07" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg><svg x="702.92" y="997.17" width="35.31" height="35.31" viewBox="0 0 1024 1024"></svg></svg>`; box.appendChild(svg_page); return svg_page; } function renderFanningStrokes(svg, strokes,color='#555',lastColor) { lastColor = lastColor || color; var group = document.createElementNS('http://www.w3.org/2000/svg', 'g'); // set the transform property on the g element so the character renders at 75x75 var transformData = HanziWriter.getScalingTransform(1000, 1000); group.setAttributeNS(null, 'transform', transformData.transform); svg.appendChild(group); strokes.forEach(function(strokePath,index) { var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttributeNS(null, 'd', strokePath); // style the character paths path.style.fill = index == strokes.length-1 ? lastColor: color; group.appendChild(path); }); } let collect = []; const cloNmu = 12; // 每行 12 个 const getDom = () => { if (collect.length == 0) { let page = createPage(); collect = Array.from(page.querySelectorAll('svg svg')); } let dom = collect.shift(); return dom } const main = async () => { // 点击过快会有问题,但是不想处理,可以加loading collect = []; box.innerHTML = ''; let text = document.querySelector('#input').value; const regexHanRange = /[\u4e00-\u9fa5]/mg; let list = text.match(regexHanRange) || []; for (let i = 0; i < list.length; i++) { let word = (list[i] || '').trim(); if(word){ let charData = await HanziWriter.loadCharacterData(list[i]); renderOne(charData) } } } const renderOne = (charData)=>{ // #f44336 // #9d9d9d // #333333 const example = document.querySelector('#example').value || '#333333'; const path = document.querySelector('#path').value || "#f44336"; const drawn = document.querySelector('#drawn').value || '#9d9d9d'; const row = parseInt( document.querySelector('#row').value) || 2 // 渲染完整例文字 renderFanningStrokes(getDom(), charData.strokes,example); for (var i = 0; i < charData.strokes.length; i++) { var strokesPortion = charData.strokes.slice(0, i + 1); // 渲染笔画 renderFanningStrokes(getDom(), strokesPortion,drawn,path); } // 渲染最后需要多少行 let num = collect.length%cloNmu + cloNmu *row; for(let i = 0 ; i < num; i++){ renderFanningStrokes(getDom(), charData.strokes,drawn); } } document.querySelector('#start').onclick = main; document.querySelector("#print").onclick = ()=>{ $("#allSvgContainer").print({ globalStyles: true, mediaPrint: true, stylesheet: null, noPrintSelector: ".no-print", iframe: true, append: null, prepend: null, manuallyCopyFormValues: true, deferred: $.Deferred(), timeout: 750, title: null, doctype: '<!doctype html>', }); } </script> </html>
参考网站:
https://www.lddgo.net/string/copybook-generate