21 lines
11 KiB
HTML
21 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-19 · 四角大字与中央双圆竖题</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/171;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-19 / 四角大字与中央双圆竖题</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-19/background.png" alt="原图纸底与画框">
|
|
<img data-component="ref-19/T01" data-kind="text" src="/layout-reference/ref-19/T01.png" alt="高" style="left:0.8849557522123894%;top:0.5847953216374269%;width:27.43362831858407%;height:21.052631578947366%">
|
|
<img data-component="ref-19/T02" data-kind="text" src="/layout-reference/ref-19/T02.png" alt="级" style="left:69.02654867256636%;top:0%;width:29.20353982300885%;height:21.637426900584796%">
|
|
<img data-component="ref-19/T03" data-kind="text" src="/layout-reference/ref-19/T03.png" alt="排" style="left:0.8849557522123894%;top:77.19298245614034%;width:30.973451327433626%;height:22.807017543859647%">
|
|
<img data-component="ref-19/T04" data-kind="text" src="/layout-reference/ref-19/T04.png" alt="版" style="left:68.14159292035397%;top:77.77777777777779%;width:30.973451327433626%;height:22.22222222222222%">
|
|
<img data-component="ref-19/T05" data-kind="text" src="/layout-reference/ref-19/T05.png" alt="蓝羽毛の版式灵感" style="left:43.36283185840708%;top:21.637426900584796%;width:15.04424778761062%;height:50.877192982456144%">
|
|
<img data-component="ref-19/T06" data-kind="text" src="/layout-reference/ref-19/T06.png" alt="右侧竖向微字（未辨识原字形）" style="left:91.1504424778761%;top:29.239766081871345%;width:7.964601769911504%;height:33.33333333333333%">
|
|
<img data-component="ref-19/I01" data-kind="image" src="/layout-reference/ref-19/I01.png" alt="" style="left:0.8849557522123894%;top:0.5847953216374269%;width:96.46017699115043%;height:33.91812865497076%">
|
|
<img data-component="ref-19/I02" data-kind="image" src="/layout-reference/ref-19/I02.png" alt="" style="left:23.893805309734514%;top:25.730994152046783%;width:51.32743362831859%;height:33.33333333333333%">
|
|
<img data-component="ref-19/I03" data-kind="image" src="/layout-reference/ref-19/I03.png" alt="" style="left:39.823008849557525%;top:78.94736842105263%;width:19.469026548672566%;height:9.941520467836257%">
|
|
<img data-component="ref-19/D01" data-kind="decoration" src="/layout-reference/ref-19/D01.png" alt="" style="left:0%;top:61.40350877192983%;width:41.5929203539823%;height:16.95906432748538%">
|
|
<img data-component="ref-19/D02" data-kind="decoration" src="/layout-reference/ref-19/D02.png" alt="" style="left:60.17699115044248%;top:65.49707602339181%;width:34.51327433628318%;height:12.865497076023392%">
|
|
<img data-component="ref-19/D03" data-kind="decoration" src="/layout-reference/ref-19/D03.png" alt="" style="left:38.05309734513274%;top:91.81286549707602%;width:23.008849557522122%;height:1.7543859649122806%">
|
|
<img class="overlay" src="/layout-reference/ref-19/annotated.png" alt="构件标注"></div><p class="muted">原图第 4 行、第 4 列；113×171 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 左上大字</td><td>高</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 右上大字</td><td>级</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 左下大字</td><td>排</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 右下大字</td><td>版</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 中央竖排标题</td><td>蓝羽毛の版式灵感</td></tr><tr tabindex="0" data-key="T06"><td>T06</td><td>文字 / 右侧竖向微字</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 顶部出血椭圆</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 中央圆形图位</td><td>—</td></tr><tr tabindex="0" data-key="I03"><td>I03</td><td>图片占位/色块 / 底部小椭圆</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 中部左线组</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 中部右线组</td><td>—</td></tr><tr tabindex="0" data-key="D03"><td>D03</td><td>装饰 / 底部短线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-19/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-19/source.png">原裁片</a> · <a href="/layout-reference/ref-19/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
|
const manifest={"id":"ref-19","name":"四角大字与中央双圆竖题","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[376,593,113,171],"row":4,"column":4},"width":113,"height":171,"reference":"/layout-reference/ref-19/source.png","annotated":"/layout-reference/ref-19/annotated.png","background":"/layout-reference/ref-19/background.png","elements":[{"id":"T01","kind":"text","role":"左上大字","box":[1,1,31,36],"text":"高","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-19/T01.png","pixels":401,"underlay":"/layout-reference/ref-19/T01-underlay.png"},{"id":"T02","kind":"text","role":"右上大字","box":[78,0,33,37],"text":"级","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-19/T02.png","pixels":455,"underlay":"/layout-reference/ref-19/T02-underlay.png"},{"id":"T03","kind":"text","role":"左下大字","box":[1,132,35,39],"text":"排","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-19/T03.png","pixels":511,"underlay":"/layout-reference/ref-19/T03-underlay.png"},{"id":"T04","kind":"text","role":"右下大字","box":[77,133,35,38],"text":"版","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-19/T04.png","pixels":590,"underlay":"/layout-reference/ref-19/T04-underlay.png"},{"id":"T05","kind":"text","role":"中央竖排标题","box":[49,37,17,87],"text":"蓝羽毛の版式灵感","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-19/T05.png","pixels":482,"underlay":"/layout-reference/ref-19/T05-underlay.png"},{"id":"T06","kind":"text","role":"右侧竖向微字","box":[103,50,9,57],"text":null,"direction":"vertical","reading":"unreadable","asset":"/layout-reference/ref-19/T06.png","pixels":303,"underlay":"/layout-reference/ref-19/T06-underlay.png"},{"id":"I01","kind":"image","role":"顶部出血椭圆","box":[1,1,109,58],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/I01.png","pixels":4172,"mask":"/layout-reference/ref-19/I01-mask.png"},{"id":"I02","kind":"image","role":"中央圆形图位","box":[27,44,58,57],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/I02.png","pixels":2238,"mask":"/layout-reference/ref-19/I02-mask.png"},{"id":"I03","kind":"image","role":"底部小椭圆","box":[45,135,22,17],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/I03.png","pixels":283,"mask":"/layout-reference/ref-19/I03-mask.png"},{"id":"D01","kind":"decoration","role":"中部左线组","box":[0,105,47,29],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/D01.png","pixels":818},{"id":"D02","kind":"decoration","role":"中部右线组","box":[68,112,39,22],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/D02.png","pixels":435},{"id":"D03","kind":"decoration","role":"底部短线","box":[43,157,26,3],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-19/D03.png","pixels":76}],"ocr":[{"box":[0.04129793498384601,0.015594541432284448,0.22713864306784656,0.2007797270955165],"confidence":1,"text":"高"},{"box":[0.03244837751659291,0.7076023384685672,0.23893805309734517,0.22807017543859653],"confidence":1,"text":"排"},{"box":[0.6961651915855457,-5.311890927117702e-10,0.23303834808259583,0.21247563352826515],"confidence":1,"text":"级"},{"box":[0.7050147490689528,0.7173489271929825,0.2271386430678467,0.21832358674463936],"confidence":1,"text":"版"}],"verification":{"pixelIdentical":true,"pixels":19323,"unreadableText":1}};
|
|
for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
|
|
document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
|
|
for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
|
|
</script></body></html>
|