22 lines
11 KiB
HTML
22 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-21 · 右侧旋转英文与节点方图</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:114/173;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-21 / 右侧旋转英文与节点方图</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-21/background.png" alt="原图纸底与画框">
|
||
<img data-component="ref-21/T01" data-kind="text" src="/layout-reference/ref-21/T01.png" alt="Bulublue" style="left:76.31578947368422%;top:1.1560693641618496%;width:21.929824561403507%;height:63.005780346820806%">
|
||
<img data-component="ref-21/T02" data-kind="text" src="/layout-reference/ref-21/T02.png" alt="25" style="left:0.8771929824561403%;top:62.42774566473989%;width:12.280701754385964%;height:6.358381502890173%">
|
||
<img data-component="ref-21/T03" data-kind="text" src="/layout-reference/ref-21/T03.png" alt="03" style="left:85.08771929824562%;top:65.3179190751445%;width:9.649122807017543%;height:4.624277456647398%">
|
||
<img data-component="ref-21/T04" data-kind="text" src="/layout-reference/ref-21/T04.png" alt="2025" style="left:74.56140350877193%;top:71.67630057803468%;width:20.175438596491226%;height:5.202312138728324%">
|
||
<img data-component="ref-21/T05" data-kind="text" src="/layout-reference/ref-21/T05.png" alt="中下说明（未辨识原字形）" style="left:2.631578947368421%;top:73.98843930635837%;width:58.77192982456141%;height:4.046242774566474%">
|
||
<img data-component="ref-21/T06" data-kind="text" src="/layout-reference/ref-21/T06.png" alt="底部两块微字（未辨识原字形）" style="left:4.385964912280701%;top:84.97109826589595%;width:65.78947368421053%;height:8.670520231213873%">
|
||
<img data-component="ref-21/I01" data-kind="image" src="/layout-reference/ref-21/I01.png" alt="" style="left:2.631578947368421%;top:2.312138728323699%;width:66.66666666666666%;height:57.80346820809249%">
|
||
<img data-component="ref-21/I02" data-kind="image" src="/layout-reference/ref-21/I02.png" alt="" style="left:0.8771929824561403%;top:78.03468208092485%;width:96.49122807017544%;height:20.23121387283237%">
|
||
<img data-component="ref-21/D01" data-kind="decoration" src="/layout-reference/ref-21/D01.png" alt="" style="left:24.561403508771928%;top:6.9364161849710975%;width:7.894736842105263%;height:5.202312138728324%">
|
||
<img data-component="ref-21/D02" data-kind="decoration" src="/layout-reference/ref-21/D02.png" alt="" style="left:65.78947368421053%;top:16.76300578034682%;width:9.649122807017543%;height:8.092485549132949%">
|
||
<img data-component="ref-21/D03" data-kind="decoration" src="/layout-reference/ref-21/D03.png" alt="" style="left:40.35087719298245%;top:57.22543352601156%;width:9.649122807017543%;height:6.9364161849710975%">
|
||
<img data-component="ref-21/D04" data-kind="decoration" src="/layout-reference/ref-21/D04.png" alt="" style="left:85.08771929824562%;top:58.38150289017341%;width:9.649122807017543%;height:5.202312138728324%">
|
||
<img data-component="ref-21/D05" data-kind="decoration" src="/layout-reference/ref-21/D05.png" alt="" style="left:14.912280701754385%;top:64.73988439306359%;width:67.54385964912281%;height:3.4682080924855487%">
|
||
<img class="overlay" src="/layout-reference/ref-21/annotated.png" alt="构件标注"></div><p class="muted">原图第 4 行、第 6 列；114×173 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</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>Bulublue</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 左日期</td><td>25</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 右日期</td><td>03</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 右年份</td><td>2025</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="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><tr tabindex="0" data-key="D04"><td>D04</td><td>装饰 / 右下圆节点</td><td>—</td></tr><tr tabindex="0" data-key="D05"><td>D05</td><td>装饰 / 日期间椭圆线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-21/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-21/source.png">原裁片</a> · <a href="/layout-reference/ref-21/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
|
||
const manifest={"id":"ref-21","name":"右侧旋转英文与节点方图","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[616,592,114,173],"row":4,"column":6},"width":114,"height":173,"reference":"/layout-reference/ref-21/source.png","annotated":"/layout-reference/ref-21/annotated.png","background":"/layout-reference/ref-21/background.png","elements":[{"id":"T01","kind":"text","role":"右侧旋转英文","box":[87,2,25,109],"text":"Bulublue","direction":"rotated","reading":"verified","asset":"/layout-reference/ref-21/T01.png","pixels":1020,"underlay":"/layout-reference/ref-21/T01-underlay.png"},{"id":"T02","kind":"text","role":"左日期","box":[1,108,14,11],"text":"25","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-21/T02.png","pixels":46,"underlay":"/layout-reference/ref-21/T02-underlay.png"},{"id":"T03","kind":"text","role":"右日期","box":[97,113,11,8],"text":"03","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-21/T03.png","pixels":59,"underlay":"/layout-reference/ref-21/T03-underlay.png"},{"id":"T04","kind":"text","role":"右年份","box":[85,124,23,9],"text":"2025","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-21/T04.png","pixels":116,"underlay":"/layout-reference/ref-21/T04-underlay.png"},{"id":"T05","kind":"text","role":"中下说明","box":[3,128,67,7],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-21/T05.png","pixels":287,"underlay":"/layout-reference/ref-21/T05-underlay.png"},{"id":"T06","kind":"text","role":"底部两块微字","box":[5,147,75,15],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-21/T06.png","pixels":603,"underlay":"/layout-reference/ref-21/T06-underlay.png"},{"id":"I01","kind":"image","role":"左上主图","box":[3,4,76,100],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/I01.png","pixels":7379,"mask":"/layout-reference/ref-21/I01-mask.png"},{"id":"I02","kind":"image","role":"底部灰色信息区","box":[1,135,110,35],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/I02.png","pixels":3138,"mask":"/layout-reference/ref-21/I02-mask.png"},{"id":"D01","kind":"decoration","role":"上方圆节点","box":[28,12,9,9],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D01.png","pixels":64},{"id":"D02","kind":"decoration","role":"右上圆节点","box":[75,29,11,14],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D02.png","pixels":87},{"id":"D03","kind":"decoration","role":"下方圆节点","box":[46,99,11,12],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D03.png","pixels":80},{"id":"D04","kind":"decoration","role":"右下圆节点","box":[97,101,11,9],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D04.png","pixels":6},{"id":"D05","kind":"decoration","role":"日期间椭圆线","box":[17,112,77,6],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-21/D05.png","pixels":200}],"ocr":[{"box":[0.03216374201388889,0.6512524085500964,0.10818713450292397,0.046242774566473965],"confidence":1,"text":"25"},{"box":[0.7009572502841679,0.02139049098390966,0.2679496675904034,0.6943671018861391],"confidence":0.30000001192092896,"text":"Bulublue："},{"box":[0.7424248804406856,0.7201085946235993,0.2110566702502512,0.049185508478124196],"confidence":1,"text":"2025"}],"verification":{"pixelIdentical":true,"pixels":19722,"unreadableText":2}};
|
||
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>
|