11 lines
2.9 KiB
HTML
11 lines
2.9 KiB
HTML
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><title>阵列覆盖与裁剪验证</title><style>body{margin:0;background:#939896;font:13px system-ui}header{padding:8px;display:flex;gap:6px;flex-wrap:wrap}button{padding:7px}#view{position:relative;margin:auto;overflow:hidden}iframe{border:0;transform-origin:top left;display:block}output{display:block;white-space:pre-wrap;padding:8px}#error{color:#800}</style><header><button data-size="1920,1080">16:9</button><button data-size="2560,1080">21:9</button><button data-size="3840,1080">32:9</button><button data-size="1400,1050">4:3</button><button data-size="1080,1920">竖屏</button><button data-theme="light">亮色</button><button data-theme="dark">暗色</button><button data-coverage="standard">标准余量</button><button data-coverage="extra">额外余量</button><button id="detail">详情</button><button id="archive">阵列</button><button id="navigate">连续换档</button></header><div id="view"><iframe src="/?scene=archive" title="自适应档案阵列"></iframe></div><output></output><output id="error"></output><script>
|
|
const f=document.querySelector('iframe'),view=document.querySelector('#view');let size=[1920,1080];
|
|
function fit(){const scale=Math.min((innerWidth-20)/size[0],(innerHeight-165)/size[1]);f.style.width=size[0]+'px';f.style.height=size[1]+'px';f.style.transform=`scale(${scale})`;view.style.width=size[0]*scale+'px';view.style.height=size[1]*scale+'px'}fit();window.onresize=fit;
|
|
const props=p=>f.contentWindow.wallpaperPropertyListener?.applyUserProperties(Object.fromEntries(Object.entries(p).map(([k,v])=>[k,{value:v}])));
|
|
f.onload=()=>{props({desktopmode:'workbench',reduced:true,sound:false,music:false,audioreactive:false,colortheme:'dark',selectionstyle:'flat'});f.contentWindow.addEventListener('error',e=>document.querySelector('#error').textContent=e.message)};
|
|
document.querySelectorAll('[data-size]').forEach(b=>b.onclick=()=>{size=b.dataset.size.split(',').map(Number);fit()});document.querySelectorAll('[data-theme]').forEach(b=>b.onclick=()=>props({colortheme:b.dataset.theme}));document.querySelectorAll('[data-coverage]').forEach(b=>b.onclick=()=>props({archivecoverage:b.dataset.coverage}));
|
|
document.querySelector('#detail').onclick=()=>{props({desktopmode:'archive'});f.contentWindow.rhine.detail()};document.querySelector('#archive').onclick=()=>{f.contentWindow.rhine.archive();props({desktopmode:'workbench'})};
|
|
document.querySelector('#navigate').onclick=()=>{props({desktopmode:'archive',reduced:false});let n=0;const interval=setInterval(()=>{f.contentWindow.rhine.select((n++*7)%40);if(n===12)clearInterval(interval)},120)};
|
|
setInterval(()=>{const s=f.contentWindow.rhine?.stats();if(s)document.querySelector('output').textContent=JSON.stringify({size,drawn:s.archiveCount,candidates:s.archiveCandidates,capacity:s.archiveCapacity,coverage:s.archiveCoverage,triangles:s.triangles,calls:s.drawCalls,mode:s.mode,fps:s.fps,window:s.loopWindow},null,1)},500);
|
|
</script></html>
|