Canvas视口转换需建立场景坐标与视口坐标的双向映射：交互输入在视口坐标系，图形数据在场景坐标系，通过zoom、scrollX/Y精确转换；视口→场景用sceneX = scrollX + vx / zoom；场景→视口用viewportX = (sceneX - scrollX) * zoom；缩放中心校准需动态更新scrollX/Y以保持光标对齐。
Canvas 绘制复杂场景时，视口转换不是简单的坐标加减，而是围绕“场景坐标”与“视口坐标”之间的双向映射展开的一套系统性逻辑。核心在于：**所有交互输入（鼠标、触摸）落在视口坐标系中，而所有图形数据和业务逻辑都应基于统一的场景坐标系管理；两者之间必须通过缩放（zoom）、偏移（scrollX / scrollY）精确桥接。**
视口坐标 → 场景坐标的转换
这是处理点击、拖拽、缩放锚点等交互的第一步。用户在画布上点击的位置（clientX/clientY），需先转为相对于 Canvas 元素左上角的视口坐标，再映射到全局场景空间：
- 获取 Canvas 元素的可视区域：
const rect = canvas.getBoundingClientRect() - 计算视口坐标：
const vx = event.clientX - rect.left，const vy = event.clientY - rect.top - 代入转换公式（含缩放与滚动）：
sceneX = scrollX + vx / zoomsceneY = scrollY + vy / zoom
这个除法是关键——缩放后，1 像素视口距离对应 1/zoom 单位的场景距离。忽略它会导致点击错位，尤其在高缩放比下偏差明显。
场景坐标 → 视口坐标的转换
用于将图形位置（如一个节点的 {x: 2500, y: -800}）正确渲染到屏幕上，或判断其是否在当前可视范围内：
- 公式为：
viewportX = (sceneX - scrollX) * zoomviewportY = (sceneY - scrollY) * zoom - 该结果可直接传给
ctx.fillRect()或ctx.fillText()等绘图方法 - 若结果超出
[0, canvas.width] × [0, canvas.height]范围，说明该图形不在当前视口内，可跳过绘制以优化性能
缩放中心校准：保持光标对齐
用户以鼠标位置为中心缩放时，目标点在缩放前后应显示在同一像素位置。这要求动态调整 scrollX 和 scrollY：
- 先用视口→场景公式，算出光标当前对应的场景坐标
(sceneX, sceneY) - 缩放后，新视口坐标系中该点仍应落在原位置
(vx, vy)，因此新偏移量为：newScrollX = sceneX - vx / newZoomnewScrollY = sceneY - vy / newZoom - 更新
scrollX/scrollY后，整个场景坐标系“平移”到位，视觉上实现无跳变缩放
Canvas 变换矩阵的辅助角色
虽然手动维护 scrollX/scrollY/zoom 已足够清晰可控，但 ctx.getTransform() 和逆矩阵可用于验证或兼容旧逻辑：
- 调用
ctx.setTransform(1, 0, 0, 1, 0, 0)重置变换，再手动应用平移+缩放（推荐） - 若使用
ctx.translate(scrollX, scrollY)+ctx.scale(zoom, zoom)，则getTransform().invertSelf()的结果理论上等价于上述手动公式 - 但注意：Canvas 变换栈易被意外污染，生产环境建议显式管理状态，而非依赖
save()/restore()堆叠
