求div/视口边界上点相对于外部点及中心的坐标

核心逻辑 #

已知视口/矩形的中心坐标、尺寸，以及外部目标点，我们需要计算中心到外部点的射线与矩形边界的第一个交点（离中心最近的边界点）。

关键变量定义 #

• 矩形中心：(cx, cy)
• 矩形宽高：w、h → 边界范围：
  • 左：x = cx - w/2，右：x = cx + w/2
  • 上：y = cy - h/2，下：y = cy + h/2
• 外部点坐标：(px, py)

分步计算步骤 #

1. 计算方向向量
   从中心指向外部点的向量：

   dx = px - cx
   dy = py - cy
   

   （如果dx和dy都为0，说明外部点与中心重合，无需处理）

2. 计算射线与四个边界的交点参数t
t是射线的缩放系数，只有t > 0时，交点在中心指向外部点的方向上。同时要验证交点是否在对应边界的有效范围内：

   • 左边界：当dx ≠ 0时，t_left = (-w/2) / dx，对应y坐标y = cy + dy * t_left，需满足cy - h/2 ≤ y ≤ cy + h/2
   • 右边界：当dx ≠ 0时，t_right = (w/2) / dx，对应y坐标y = cy + dy * t_right，需满足y范围
   • 上边界：当dy ≠ 0时，t_top = (-h/2) / dy，对应x坐标x = cx + dx * t_top，需满足cx - w/2 ≤ x ≤ cx + w/2
   • 下边界：当dy ≠ 0时，t_bottom = (h/2) / dy，对应x坐标x = cx + dx * t_bottom，需满足x范围

3. 筛选有效交点，取最近的那个
   从所有t > 0且坐标在对应边界范围内的交点中，选择t最小的点——这个点就是射线最先碰到的边界点，也就是你要找的目标坐标。

常见错误排查 #

• 忽略边界范围验证：直接按比例缩放计算坐标，可能得到超出矩形边界的无效点（比如射线本应碰到上边界，却错误计算到左边界）
• 未处理t的正负：t < 0时交点在中心的反方向，不是我们需要的外部方向的边界点
• 特殊方向遗漏：比如垂直/水平方向（dx=0或dy=0），需单独处理，直接返回对应边界的中点

代码示例（JavaScript） #

function getBoundaryPoint(cx, cy, w, h, px, py) {
  const halfW = w / 2;
  const halfH = h / 2;
  const dx = px - cx;
  const dy = py - cy;

  const validPoints = [];

  // 左边界交点
  if (dx !== 0) {
    const t = (-halfW) / dx;
    if (t > 0) {
      const y = cy + dy * t;
      if (y >= cy - halfH && y <= cy + halfH) {
        validPoints.push({ t, x: cx - halfW, y });
      }
    }
  }

  // 右边界交点
  if (dx !== 0) {
    const t = halfW / dx;
    if (t > 0) {
      const y = cy + dy * t;
      if (y >= cy - halfH && y <= cy + halfH) {
        validPoints.push({ t, x: cx + halfW, y });
      }
    }
  }

  // 上边界交点
  if (dy !== 0) {
    const t = (-halfH) / dy;
    if (t > 0) {
      const x = cx + dx * t;
      if (x >= cx - halfW && x <= cx + halfW) {
        validPoints.push({ t, x, y: cy - halfH });
      }
    }
  }

  // 下边界交点
  if (dy !== 0) {
    const t = halfH / dy;
    if (t > 0) {
      const x = cx + dx * t;
      if (x >= cx - halfW && x <= cx + halfW) {
        validPoints.push({ t, x, y: cy + halfH });
      }
    }
  }

  // 取离中心最近的有效点
  if (validPoints.length === 0) {
    return { x: cx, y: cy }; // 外部点在矩形内的特殊情况
  }
  validPoints.sort((a, b) => a.t - b.t);
  return validPoints[0];
}

内容的提问来源于stack exchange，提问作者Michał B