Canvas画布拖拽滚动的核心是将鼠标拖动转化为视口逻辑偏移，统一维护offsetX、offsetY和scale，重绘时用setTransform一次性设置变换矩阵，并基于业务坐标系计算偏移、动态约束边界、校正页面滚动与CSS缩放干扰，缩放时锚定鼠标点同步调整偏移。
Canvas 实现画布拖拽滚动，核心是把“鼠标拖动”转化为“视口逻辑偏移”，同时确保图形不越界。关键不在反复调用 translate，而在于统一维护 offsetX、offsetY 和 scale 三个状态，并在重绘时用 setTransform 一次性设置变换矩阵。
坐标偏移必须基于原始业务坐标系
用户拖动时，鼠标位移是像素值（如 Δx = 10px），但 Canvas 内部绘制使用的是原始业务坐标（比如地图经纬度、图层像素坐标）。若直接用像素位移更新视口，缩放后就会“拖飘”或松手跳动。正确做法是：
- 记录鼠标按下时的屏幕坐标
startX、startY - 拖动中获取当前屏幕坐标
currentX、currentY - 计算逻辑偏移增量：
deltaX = (currentX - startX) / scale，deltaY = (currentY - startY) / scale - 更新视口偏移：
offsetX += deltaX，offsetY += deltaY - 重绘前统一设置：
ctx.setTransform(scale, 0, 0, scale, offsetX * scale, offsetY * scale)
边界约束要作用于逻辑偏移量，而非像素
限制画布不能拖出内容区域，不是限制 offsetX 在某个固定数值内，而是根据当前缩放和内容尺寸动态计算合法范围。假设原始内容宽高为 contentWidth、contentHeight，Canvas 显示区域为 canvasWidth、canvasHeight：
- 左边界：
minOffsetX = (canvasWidth / scale - contentWidth)（即内容右边缘对齐画布右边缘） - 右边界：
maxOffsetX = 0（内容左边缘对齐画布左边缘） - 上边界：
minOffsetY = (canvasHeight / scale - contentHeight) - 下边界：
maxOffsetY = 0 - 每次更新后做截断：
offsetX = Math.max(minOffsetX, Math.min(maxOffsetX, offsetX))
页面滚动与 CSS 缩放会干扰坐标计算
如果 Canvas 被包裹在滚动容器中，或设置了 width/height CSS 样式（而非 HTML 属性），鼠标事件坐标会失准。必须做两件事：
- 用
canvas.getBoundingClientRect()获取 Canvas 相对于视口的真实位置，再减去e.clientX/e.clientY得到画布内坐标 - 考虑页面滚动偏移：
const scrollX = window.pageXOffset || document.documentElement.scrollLeft，const scrollY = window.pageYOffset || document.documentElement.scrollTop，并在计算中纳入（尤其当 Canvas 不在 body 顶层时） - 若 Canvas 有 CSS 缩放（如
transform: scale(0.8)），需额外除以其 CSS 缩放因子，否则拖动响应会变慢或加速
缩放时锚定鼠标点，需同步调整 offset 补偿
滚轮缩放若不锚定鼠标位置，画面会“滑走”。实现方式是：先将鼠标屏幕坐标转为当前世界坐标，再用新缩放值反推新的 offsetX、offsetY，使该世界点仍落在原屏幕位置：
- 鼠标位置转世界坐标：
xWorld = (clientX - offsetX * scale) / scale，yWorld = (clientY - offsetY * scale) / scale - 设新缩放为
newScale，则新偏移应满足：clientX === xWorld * newScale + offsetXNew * newScale - 解得：
offsetXNew = xWorld - clientX / newScale，同理得offsetYNew - 更新
offsetX、offsetY后，再应用新scale
