Web Components 图片预览缩放组件基于原生标准封装，含遮罩层、视图容器和控制区三部分，支持双指缩放、单指拖拽、双击切换、鼠标滚轮等手势，具备缩放范围限制、边界约束与松手回弹，并提供简洁API及样式定制能力。
Web Components 实现图片预览与缩放组件，核心在于用原生标准封装可复用、无框架依赖的自定义元素。它不依赖 Vue/React，通过 customElements.define 注册，支持跨框架使用，适合微前端或渐进式升级场景。
结构设计：轻量但完整
组件应包含三部分基础结构：
-
遮罩层（overlay）：全屏 fixed 定位，背景半透明，阻止底层滚动（
document.body.style.overflow = 'hidden'） -
视图容器（viewer）：居中 flex 布局，内含
<img>元素，所有缩放/平移通过 CSStransform控制 - 控制区（UI controls）：页码指示、关闭按钮、缩放/旋转按钮（可选），使用 slot 或内置 DOM 节点
手势交互：纯原生事件驱动
避免第三方库，直接监听底层事件实现精准控制：
-
双指缩放：监听
touchstart/touchmove，计算两指间距变化，动态更新scale值；配合transform-origin: center保证缩放锚点居中 -
单指拖拽：在缩放 >1 时启用，记录 touchstart 坐标，move 中计算偏移量并更新
translateX/Y -
双击切换缩放级：用
click+ 时间间隔判断（如 300ms 内两次 click），在 1x ↔ 2.5x 间切换 -
鼠标滚轮缩放：监听
wheel事件，event.deltaY > 0为缩小，反之放大，同时修正缩放中心点（基于鼠标 clientX/clientY 计算）
状态管理与边界约束
关键体验来自“有约束的自由”：
- 缩放范围限制在
1–3之间，超出即 clamp；每次缩放后立即触发transform并重置平移偏移逻辑 - 拖拽时检测图像边界：计算
img.naturalWidth * scale与容器宽度差值，限制translateX在[0, 容器宽 − 图像宽]区间，Y 同理 - 松手后自动回弹：使用
requestAnimationFrame+ 简单缓动（如 ease-out），将越界位置平滑拉回合法范围 - 多图切换用
keydown（←→）和 swipe 水平 touchmove，切换时重置 scale 和 translate
使用方式与扩展性
组件暴露简洁 API，符合 Web Components 设计哲学：
- 属性：
src（单图）、urls（JSON 字符串数组）、index（初始索引） - 方法：
open(index)、close()、zoomIn()、zoomOut()、rotate(deg) - 事件：
change（当前图变更）、scalechange（缩放值变化）、close（手动关闭） - 样式可通过
::part()或 CSS 自定义属性（如--preview-bg、--control-color）定制外观
不复杂但容易忽略的是：touch 事件需调用 event.preventDefault() 防止页面滚动，wheel 事件需 event.preventDefault() 阻止默认缩放行为，且所有 transform 更新必须合并到单次 render 中（避免 layout thrashing）。
