JS图形编辑器场景坐标与视口坐标转换详解

图形编辑器坐标系

在图形编辑器的开发中，主要涉及两种坐标系：场景坐标系（Scene Coordinate System）与视口坐标系（Viewport Coordinate System）。

视口被定义为场景的一个子区域，用户通过视口观察和操作场景内容。

设定视口原点相对于场景原点的水平偏移量为 scrollX，垂直偏移量为 scrollY。

首先假设不进行缩放操作。当用户在视口坐标系中点击某点，其坐标表示为 (x, y) 时，该点在场景坐标系中的对应坐标计算如下：

const sceneX = scrollX + x;
const sceneY = scrollY + y;

这一转换逻辑相对直观。

视口坐标转换为场景坐标

接下来引入画布缩放机制，即支持放大或缩小画布，其缩放比例由变量 zoom 表示。

此时，若视口中的某点坐标为 (x, y)，其在场景坐标系下的坐标计算需考虑缩放因子：

function viewportCoordsToSceneCoords(x, y, scrollX, scrollY, zoom) {
  return {
  x: scrollX + x / zoom,
  y: scrollY + y / zoom
  }
}

公式中采用 x 除以 zoom 的原因在于，视口中展示的是经过缩放处理的图形，其内部坐标值已随缩放比例变化。因此，必须先将其还原为 zoom 值为 1 时的真实场景坐标值。

场景坐标转换为视口坐标

反之，若需将场景坐标系中的某点 (x, y) 转换回视口坐标，只需对前述公式进行等式变换即可得出结果：

function sceneCoordsToViewportCoords(x, y, scrollX, scrollY, zoom) {
  return {
  x: (x - scrollX) * zoom,
  y: (y - scrollY) * zoom
  };
}

在实际交互中，通常通过组合按键与滚轮操作，实现以当前光标位置为中心的画布缩放，或通过按钮触发缩放。

为了确保缩放操作后，原光标指向的场景位置在视觉上仍与缩放前保持一致，必须重新计算并校准缩放后的 scrollX 和 scrollY 值。

核心算法逻辑在于保持缩放前后，目标点到视口左上角的距离（在视口坐标系下）维持恒定。

function calScrollVal(cx, cy, prevZoom, zoom, scrollX, scrollY) {
  // 先计算目标点的场景坐标（这里 cx 和 cy 是基于视口坐标系的）
  const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(cx, cy, prevZoom, scrollX, scrollY);
  // 缩放后画布缩放比变成了 zoom，距离视口左上角的距离变成了 cx / zoom
  // 减去这个距离，就是新的 scrollX 了。
  const newScrollX = sceneX - cx / zoom;
  const newScrollY = sceneY - cy / zoom;
  return {
    x: newScrollX,
    y: newScrollY
  };
}

补充说明其他情况。

存在一种特殊情况：实际视口区域的原点可能存在额外的偏移量 offsetX 和 offsetY，具体示意可见相关图示。

处理此情况时，只需将前述代码中的 scrollX 替换为 (scrollX + offsetX)，scrollY 替换为 (scrollY + offsetY)，其余计算逻辑保持不变。

以上即为坐标转换的核心内容。

总结而言，视口坐标本质上是场景坐标经过平移及缩放变换后的结果。因此，从视口坐标转换至场景坐标，需执行除以 zoom 并加上偏移值的操作。在图形编辑器开发中，涉及大量坐标系转换逻辑，深入理解这两个坐标系的关系至关重要。如需了解更多关于JS场景视口坐标转换的资料，请关注本站其他相关文章！