js-hanzi
Version:
漢字網頁排版 支持文字豎向排列，支持米字格底紋
3 lines • 8.97 kB
JavaScript
class Zi{constructor(config={}){const{borderSize:borderSize="1px",borderSizeBold:borderSizeBold="2px",fontFamily:fontFamily="serif",borderColorOut:borderColorOut="#006400",borderColorIn:borderColorIn="#FF0000",mode:mode=0,style:// '0V/1H'
style=0,rowNum:// '0米/1田/2口/3一'
rowNum=8,columnNum:columnNum=8,container:container="#container",padding:padding=50,padding1:padding1=5}=config;this.config={clientWidth:0,clientHeight:0,containerWidth:0,containerHeight:0,boxSize:100,fontSize:80,borderSize:borderSize,borderSizeBold:borderSizeBold,fontFamily:fontFamily,borderColorOut:borderColorOut,borderColorIn:borderColorIn,mode:mode,style:style,rowNum:rowNum,columnNum:columnNum,container:container,padding:padding,padding1:padding1};this.createContainer();this.style=document.createElement("style");this.full();this.updateSizes();this.updateStyle()}createIframeWithContent(style){const iframeDoc=this.iframe.contentDocument||this.iframe.contentWindow.document;iframeDoc.open();iframeDoc.write(`\n <!DOCTYPE html>\n <html lang="zh-CN">\n <head>\n <meta charset="UTF-8">\n <title></title>\n <style>\n body {\n width: ${this.config.mode===1?"210":"297"}mm;\n height: ${this.config.mode===1?"297":"210"}mm;\n padding: 0;\n margin: 0;\n font-family: 'Source Han Serif TC', 'SimSun-ExtB', 'MingLiU', serif;\n }\n </style>\n <style>\n ${style}\n </style>\n </head>\n <body>\n ${this.container.outerHTML}\n </body>\n </html>\n `);iframeDoc.close()}printIframe(){const a=210*4;const b=297*4;if(this.config.mode===1){this.iframe.width=`${a}px`;this.iframe.height=`${b}px`}else{this.iframe.width=`${b}px`;this.iframe.height=`${a}px`}this.createIframeWithContent(this.changeStyle(this.changeSizes({...this.config,clientWidth:this.config.mode===1?a:b,clientHeight:this.config.mode===1?b:a})));this.iframe.contentWindow.print()}createContainer(){this.container=document.querySelector(this.config.container);this.container1=document.createElement("div");this.container1.className="c1";this.container.appendChild(this.container1);this.container2=document.createElement("div");this.container2.className="c2";this.container1.appendChild(this.container2);this.iframe=document.createElement("iframe");this.iframe.style.display="none";this.container.parentElement.appendChild(this.iframe)}changeSizes(config){const dimension=config.mode===1?config.clientWidth:config.clientHeight;const bs=Math.floor((dimension-config.padding*2-config.padding1*2)/config.columnNum);const fs=Math.floor(bs*4/5);config.boxSize=bs;config.fontSize=fs;const v=bs*config.columnNum;if(config.mode===1){config.containerWidth=v;config.containerHeight=`auto`}else{config.containerHeight=v;config.containerWidth=`auto`}return config}updateSizes(){this.config.clientWidth=this.container.parentElement.clientWidth;this.config.clientHeight=this.container.parentElement.clientHeight;this.config=this.changeSizes(this.config)}setMode(mode){this.config.mode=mode;this.updateSizes();this.updateStyle()}setRowNum(num){this.config.rowNum=num;this.full();this.updateStyle()}setColumnNum(num){this.config.columnNum=num;this.full();this.updateSizes();this.updateStyle()}setBorderColorOut(color){this.config.borderColorOut=color;this.updateStyle()}setBorderColorIn(color){this.config.borderColorIn=color;this.updateStyle()}setStyle(style){this.config.style=style;this.updateStyle()}create(index,t){let character=this.container2.children[index];if(character){if(t){character.querySelector(".t").textContent=t}}else{const character=document.createElement("div");character.className="c";for(let i=0;i<4;i++){const line=document.createElement("i");line.className=`l${i}`;character.appendChild(line)}const text=document.createElement("span");text.className="t";text.textContent=t;character.appendChild(text);this.container2.appendChild(character)}}show(content){while(this.container2.children.length){this.container2.removeChild(this.container2.lastChild)}content.split("").forEach(((index,t)=>{this.create(t,index)}));this.full();this.updateStyle()}full(){const count=this.config.rowNum*this.config.columnNum;while(this.container2.children.length>count){this.container2.removeChild(this.container2.lastChild)}for(let t=0;t<count;t++){this.create(t)}}changeStyle(config){return`\n ${config.container} {\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: ${config.mode===1?"column":"row"};\n align-items: center;\n justify-content: center;\n padding: ${config.padding}px;\n box-sizing: border-box;\n }\n \n .c1 {\n border: 3px solid ${config.borderColorOut};\n display: flex;\n flex-direction: ${config.mode===1?"column":"row"};\n align-items: center;\n justify-content: center;\n padding: ${config.padding1}px;\n box-sizing: border-box; \n overflow: scroll;\n }\n \n .c2 {\n height: ${config.containerHeight}px;\n width: ${config.containerWidth}px;\n display: flex;\n align-content: flex-start;\n flex-wrap: wrap;\n flex-direction: ${config.mode===1?"row":"column"};\n border-${config.mode===1?"left":"top"}: ${config.borderSize} solid ${config.borderColorOut};\n border-${config.mode===1?"right":"bottom"}: ${config.borderSize} solid ${config.borderColorOut};\n direction: ${config.mode===1?"ltr":"rtl"};\n font-size: ${config.fontSize}px;\n font-family: ${config.fontFamily};\n overflow: scroll;\n }\n\n .c {\n box-sizing: border-box;\n ${config.mode===1?"margin-top: 0":"margin-right: 0"};\n ${config.mode===1?"margin-bottom: .5em":"margin-left: .5em"};\n border-right: ${config.mode===1?config.style>2?0:config.borderSize:config.borderSizeBold} solid ${config.borderColorOut};\n border-left: ${config.mode===1?config.style>2?0:config.borderSize:config.borderSizeBold} solid ${config.borderColorOut};\n border-bottom: ${config.mode===1?config.borderSizeBold:config.style>2?0:config.borderSize} solid ${config.borderColorOut};\n border-top: ${config.mode===1?config.borderSizeBold:config.style>2?0:config.borderSize} solid ${config.borderColorOut};\n width: ${config.boxSize}px;\n height: ${config.boxSize}px;\n display: flex;\n overflow: hidden;\n justify-content: center;\n position: relative;\n }\n \n .c:nth-last-child(-n+${config.columnNum}) {\n ${config.mode===1?"margin-top: 0":"margin-right: 0"};\n ${config.mode===1?"margin-bottom: 0":"margin-left: 0"};\n }\n \n .l0, .l1, .l2, .l3 {\n position: absolute;\n left: 0;\n top: 0;\n box-sizing: border-box;\n background-color: transparent;\n }\n \n .l0, .l1 {\n width: 141.4%;\n height: 141.4%;\n }\n \n .l0 {\n border-bottom: ${config.borderSize} dashed ${config.borderColorIn};\n transform: translateX(-50%) translateY(-50%) rotate(-45deg);\n }\n \n .l1 {\n border-left: ${config.borderSize} dashed ${config.borderColorIn};\n transform: translateX(20%) translateY(-50%) rotate(-45deg);\n }\n \n .l2, .l3 {\n width: 100%;\n height: 100%;\n }\n \n .l2 {\n border-left: ${config.borderSize} dashed ${config.borderColorIn};\n transform: translateX(50%);\n }\n \n .l3 {\n border-top: ${config.borderSize} dashed ${config.borderColorIn};\n transform: translateY(50%);\n }\n\n .t {\n line-height: ${config.boxSize}px;\n height: 0;\n z-index: 1;\n }\n \n ${config.style>0?".l0, .l1 {display: none}":".l0, .l1 {display: block}"}\n \n ${config.style>1?".l2, .l3 {display: none}":".l2, .l3 {display: block}"}\n \n print {\n {\n size: A4 ${config.mode===1?"portrait":"landscape"};\n }\n \n .c2 {\n ${config.mode===1?"height: 100%!important;":""}\n }\n }\n`}updateStyle(){this.style.textContent=this.changeStyle(this.config);document.head.appendChild(this.style)}}