fix(lightbox): 回 1x 自动归中+平移四向钳制(用户实测 bug)

用户实测:缩放回 100% 图片不回中显示不全;另放大态可拖飞出舞台。
三修:zoomAt next<=1 归零 translate;applyZoom 平移钳制 |t|≤尺
寸差/2(放大态不变量=图盒覆盖舞台而非缩在视口内);滚轮下限
0.5x→1x(fit 即最小,0.5x 制造偏移态)。mockup 同步三修。

验证: 回 1x transform=none 实测;四角极限拖拽覆盖舞台不变量
全过;E2E 34/34

Spec: none (用户实测 bug 热修,线上 v2+mockup 双修)

Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed 2026-11-01 12:34:11 +08:00
1 parent 54769bcfdf
commit 44626f8edc
2 files changed
+111 -14

No files matched your search

+6 -2
View File
@@ -238,7 +238,11 @@ function show(i,dir){
}
/* ===== 缩放:滚轮锚点 / 双击 / 双指 / 拖拽(复用线上 v2 数学) ===== */
function applyZoom(){pic.style.transform=`translate(${zoom.tx}px,${zoom.ty}px) scale(${zoom.s})`;
function clampPan(){const mx=Math.max(0,pic.clientWidth*(zoom.s-1)/2),
my=Math.max(0,pic.clientHeight*(zoom.s-1)/2);
zoom.tx=Math.min(mx,Math.max(-mx,zoom.tx));zoom.ty=Math.min(my,Math.max(-my,zoom.ty));}
function applyZoom(){clampPan();
pic.style.transform=zoom.s===1?'none':`translate(${zoom.tx}px,${zoom.ty}px) scale(${zoom.s})`;
pic.classList.toggle('zoomed',zoom.s!==1);
lbx.classList.toggle('clean',zoom.s!==1);}
function instantResetZoom(){const keep=pic.style.transition;pic.style.transition='none';
@@ -246,7 +250,7 @@ function instantResetZoom(){const keep=pic.style.transition;pic.style.transition
lbx.classList.remove('clean');void pic.offsetWidth;pic.style.transition=keep||'';}
function zoomAt(next,cx,cy){const r=pic.getBoundingClientRect();
const ax=cx-r.left-r.width/2-zoom.tx,ay=cy-r.top-r.height/2-zoom.ty;
const k=next/zoom.s;zoom.tx-=ax*(k-1);zoom.ty-=ay*(k-1);zoom.s=next;applyZoom();zindShow();}
if(next<=1){zoom={s:1,tx:0,ty:0};applyZoom();zindShow();return;}const k=next/zoom.s;zoom.tx-=ax*(k-1);zoom.ty-=ay*(k-1);zoom.s=next;applyZoom();zindShow();}
let zt;function zindShow(){const z=$('zind');z.textContent=Math.round(zoom.s*100)+'%';
z.classList.add('show');clearTimeout(zt);zt=setTimeout(()=>z.classList.remove('show'),900);}
lbx.addEventListener('wheel',e=>{if(!open_)return;e.preventDefault();