关键在于用offsetX、offsetY和scale统一管理视口状态，拖动时位移量除以scale转为原始坐标系偏移，缩放时按鼠标位置锚定并调整offset补偿视觉偏移。
Canvas 实现拖动平移时，若同时支持缩放，关键在于让鼠标拖动产生的位移量“按当前缩放比例反向缩放”，否则会出现拖动发飘、偏移失准、松手跳动等问题。核心不是单纯记录 translate(x, y)，而是维护一个逻辑上的画布视口偏移（offsetX, offsetY），所有绘制都基于该偏移和当前缩放因子进行坐标变换。
用 offset + scale 统一管理视口状态
不要直接在 Canvas 上反复调用 ctx.translate() 或 ctx.scale()，而应维护三个独立状态变量：
- scale：当前整体缩放倍数（初始为 1）
- offsetX、offsetY：视口左上角相对于原始坐标系原点的偏移（单位是原始坐标，非像素）
每次重绘前统一设置变换：
ctx.setTransform(scale, 0, 0, scale, offsetX * scale, offsetY * scale);
这样所有绘图坐标（如 ctx.fillRect(x, y, w, h)）都直接使用原始业务坐标，无需手动缩放或偏移。
拖动时正确计算逻辑偏移增量
鼠标按下时记录初始屏幕坐标 startX、startY；拖动中获取当前屏幕坐标 currentX、currentY。二者差值是像素级位移，需除以当前 scale 才能转为原始坐标系下的视口偏移变化量：
deltaX = (currentX - startX) / scaledeltaY = (currentY - startY) / scale- 然后更新：
offsetX += deltaX，offsetY += deltaY
注意：这个计算必须在 scale !== 0 前提下进行，且建议对极小缩放值（如 < 0.01）做保护，避免除零或数值爆炸。
缩放中心要锚定鼠标位置
用户缩放时（如滚轮），希望以鼠标指针所在位置为缩放中心，而非画布左上角。这就需要在缩放前后调整 offsetX、offsetY，补偿因缩放导致的视觉偏移。
假设鼠标在屏幕坐标 clientX、clientY 处触发缩放，先将其转为当前原始坐标系下的位置：
xInWorld = (clientX - offsetX * scale) / scaleyInWorld = (clientY - offsetY * scale) / scale
再用新缩放值 newScale 反推新的偏移，使该世界坐标仍映射到同一屏幕位置：
newOffsetX = clientX / newScale - xInWorldnewOffsetY = clientY / newScale - yInWorld
化简后可得更简洁写法：
const dx = (clientX - offsetX * scale) * (1/newScale - 1/scale); const dy = (clientY - offsetY * scale) * (1/newScale - 1/scale); offsetX += dx; offsetY += dy; scale = newScale;
边界限制与惯性拖动可选增强
防止视口拖出内容区域，可在更新 offsetX/offsetY 后做约束。例如已知内容总宽高为 contentWidth、contentHeight，则：
offsetX = Math.max(-contentWidth * scale + canvasWidth, Math.min(0, offsetX))offsetY = Math.max(-contentHeight * scale + canvasHeight, Math.min(0, offsetY))
若加惯性拖动，可在 mouseup 后记录末速度，用 requestAnimationFrame 逐步衰减位移，每次仍按上述规则更新 offsetX/Y 即可。
