Canvas画布拖拽与缩放交互手柄的核心是用offsetX、offsetY和scale三变量统一管理视口状态，通过ctx.setTransform(scale,0,0,scale,offsetXscale,offsetYscale)实现坐标系变换，所有绘图直接使用原始逻辑坐标。
Canvas 实现画布拖拽与缩放的交互手柄，核心是把“用户操作”准确映射到“逻辑坐标系变化”，而不是直接堆叠 ctx.translate() 或 ctx.scale()。手柄本身不是 UI 控件，而是指一整套响应鼠标/触摸事件、计算偏移与缩放、统一管理视口状态的逻辑机制。
用 offsetX / offsetY + scale 管理视口状态
不要靠反复调用 save()/restore() 或嵌套 translate 来维持坐标系——容易失控。应维护三个独立变量：
- scale：当前整体缩放倍数（初始为 1）
- offsetX、offsetY：视口左上角在原始业务坐标系中的位置（单位是逻辑坐标，不是像素）
每次重绘前统一设置变换：
ctx.setTransform(scale, 0, 0, scale, offsetX * scale, offsetY * scale);这样所有绘图 API（如 fillRect(x, y, w, h)）都直接使用原始坐标，无需手动换算。
拖拽手柄：位移量需反向缩放
鼠标按下时记录 startX、startY（屏幕坐标）；拖动中获取 currentX、currentY。二者差值是像素级位移，必须除以当前 scale 才能转为逻辑坐标系下的偏移增量：
- deltaX = (currentX − startX) / scale
- deltaY = (currentY − startY) / scale
- 然后更新：
offsetX += deltaX，offsetY += deltaY
注意：若 scale 接近零（如
缩放手柄：以鼠标点为锚点动态补偿 offset
滚轮缩放时，希望鼠标所在位置在缩放前后保持“画面内容不变”，这就要求调整 offsetX、offsetY 补偿视觉偏移。步骤如下：
- 将鼠标屏幕坐标
clientX、clientY转为当前逻辑坐标：
xInWorld = (clientX − offsetX × scale) / scale
yInWorld = (clientY − offsetY × scale) / scale - 设新缩放值为
newScale，要让该逻辑点仍映射到同一屏幕位置，则新偏移为：
newOffsetX = clientX / newScale − xInWorld
newOffsetY = clientY / newScale − yInWorld
这个公式可直接使用，不需要额外存储中间世界坐标。
手势兼容：单指/双指统一建模
移动端需支持单指拖拽、双指缩放。关键在于抽象出“中心点”概念：
- 单指拖拽：以手指位置为移动参考点，计算
dragX = currentX − startX，再按scale反向缩放后更新offsetX/Y - 双指缩放：取两触点中心
centerX、centerY作为缩放锚点，按上述锚点缩放逻辑更新offsetX/Y，同时更新scale - 双指拖拽（可选）：用双指中心点的位移量替代单指位移，其余逻辑一致
所有操作最终都归结为对 offsetX、offsetY、scale 三变量的原子更新，再触发重绘。
