缩略图同步缩放预览的关键是坐标空间严格对齐：主画布视口按原始图像尺寸映射到缩略图，点击缩略图时逆向计算目标位置并调整视口，缩略图需在关键状态变更后及时重绘，并注意浮点精度与边界处理。
Canvas 实现缩略图同步缩放预览，关键不是让两张画布“看起来一样大”，而是让它们的坐标空间严格对齐——主画布拖动/缩放时，缩略图要实时反映当前可视区域在原始图像中的位置和比例。
缩略图与主画布的坐标映射关系
缩略图本质是一张低分辨率的“地图”，它不参与交互，只做状态指示。它的宽高通常固定（比如 200×150px），而主画布可能很大（如 4000×3000px 图像）。同步逻辑的核心是：把主画布当前视口（visible viewport）的左上角、宽高，按比例映射到缩略图坐标系中。
- 先算出主画布当前显示区域在原始图像上的像素范围：
viewX = -translateX / scale，viewY = -translateY / scale，viewW = canvasWidth / scale，viewH = canvasHeight / scale - 再将这个区域等比缩放到缩略图尺寸：缩略图中对应矩形的
x = (viewX / imgWidth) * thumbnailWidth，y = (viewY / imgHeight) * thumbnailHeight，w = (viewW / imgWidth) * thumbnailWidth，h = (viewH / imgHeight) * thumbnailHeight - 注意：所有计算都基于原始图像尺寸，而非画布像素尺寸，避免因 devicePixelRatio 或 CSS 缩放引入误差
缩略图点击跳转的逆向定位
用户点击缩略图某点，需快速定位到主画布对应位置并调整视口。这不是简单乘以比例，而要考虑当前缩放和平移状态：
- 获取点击点在缩略图中的相对坐标
tx、ty - 换算成原始图像坐标：
imgX = (tx / thumbnailWidth) * imgWidth，imgY = (ty / thumbnailHeight) * imgHeight - 再转换为主画布画布坐标系下的目标位置：
targetX = imgX * scale + translateX，targetY = imgY * scale + translateY - 最后平移画布，使该点居中（或按需锚定），例如：
translateX = canvasWidth/2 - targetX，translateY = canvasHeight/2 - targetY
缩略图绘制与更新时机
缩略图不需要高频重绘，但必须在关键状态变更后立即刷新，否则会误导用户：
- 主画布发生缩放（scale 改变）、平移（translateX/Y 更新）、或图像加载完成时，触发缩略图重绘
- 缩略图自身用一张独立 canvas 绘制：先 drawImage 原图缩略版（用
ctx.drawImage(img, 0, 0, thumbW, thumbH)），再叠加当前视口矩形（strokeRect） - 建议加一层半透明遮罩（fillRect + globalAlpha=0.2）突出视口框，提升可读性
- 避免在 requestAnimationFrame 中无差别重绘缩略图；可用节流（throttle）控制更新频率，比如 60ms 内最多更新一次
边界与精度处理细节
实际运行中容易出现“框偏了”或“点击跳转错位”，多因浮点误差或坐标取整导致：
- 缩略图矩形的
x、y建议保留 1 位小数，避免 sub-pixel 渲染模糊；w、h至少为 1，防止消失 - 主画布视口计算中，
translateX和scale应使用当前真实值，不要依赖累计变量（易漂移），推荐每次从 transform matrix 解析或显式维护状态对象 - 若主画布支持旋转，缩略图仅做缩放/平移映射（旋转信息不体现），此时需明确告知用户缩略图不反映旋转状态
