缩略图同步缩放预览的关键是坐标空间严格对齐：主画布视口按原始图像尺寸映射到缩略图，点击缩略图时逆向计算目标位置并调整视口，缩略图需在关键状态变更后及时重绘，并注意浮点精度与边界处理。

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 缩放引入误差

缩略图点击跳转的逆向定位

用户点击缩略图某点，需快速定位到主画布对应位置并调整视口。这不是简单乘以比例，而要考虑当前缩放和平移状态：

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

• 获取点击点在缩略图中的相对坐标 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 解析或显式维护状态对象
• 若主画布支持旋转，缩略图仅做缩放/平移映射（旋转信息不体现），此时需明确告知用户缩略图不反映旋转状态