如何计算两点定义的直线与中心宽高已知的矩形的交点

你当前定义的是无旋转的轴对齐矩形，不要用预先算斜率的方式实现——竖直线段会直接触发除零错误，优先用Liang-Barsky线段裁剪算法实现，逻辑简洁、边界情况覆盖率高，性能也优于逐边求交再过滤的方案。

1. 先计算矩形的四条边界坐标 #

你给出的矩形参数是中心点坐标+宽高，先换算出四条边的位置：

const rectLeft = rectangle.x - rectangle.w / 2
const rectRight = rectangle.x + rectangle.w / 2
// 注意：如果是屏幕/Canvas类y轴向下的坐标系，上下边的加减号互换
const rectTop = rectangle.y - rectangle.h / 2
const rectBottom = rectangle.y + rectangle.h / 2

2. 用参数方程表示线段AB #

放弃斜截式，用参数t表示线段上任意点，t取值范围为[0,1]，t=0对应起点A，t=1对应终点B：

x = a.x + t * (b.x - a.x)
y = a.y + t * (b.y - a.y)

3. 核心计算逻辑 #

Liang-Barsky算法的核心是通过矩形四个边界的约束，算出参数t的有效取值区间，区间端点对应的坐标就是交点：

• 初始化t的下限t0 = 0（对应线段起点），上限t1 = 1（对应线段终点）
• 把四个边界的约束统一整理为p * t ≤ q的形式，四个边界对应的p、q分别为：
  • 左边界：p = -(b.x - a.x)，q = a.x - rectLeft
  • 右边界：p = b.x - a.x，q = rectRight - a.x
  • 上边界：p = -(b.y - a.y)，q = a.y - rectTop
  • 下边界：p = b.y - a.y，q = rectBottom - a.y
• 遍历四组p、q值：
  • 若p=0，说明线段和当前边界平行，此时如果q<0，说明线段完全在矩形外侧，直接返回无交点
  • 若p<0，对应入边约束，计算t = q/p，用这个值更新t0（取t0和t的较大值）
  • 若p>0，对应出边约束，计算t = q/p，用这个值更新t1（取t1和t的较小值）
  • 每次更新后如果t0 > t1，说明线段和矩形没有交集，直接返回无交点
• 遍历完成后，把t0、t1分别代入参数方程，得到的两个点就是线段和矩形的交点：
  • t0对应线段进入矩形的交点
  • t1对应线段穿出矩形的交点
  • 如果t0=0说明起点A在矩形内部/边上，如果t1=1说明终点B在矩形内部/边上

可直接运行的实现代码 #

function getLineRectIntersections(a, b, rect) {
  const rectLeft = rect.x - rect.w / 2
  const rectRight = rect.x + rect.w / 2
  const rectTop = rect.y - rect.h / 2
  const rectBottom = rect.y + rect.h / 2

  let t0 = 0, t1 = 1
  const dx = b.x - a.x
  const dy = b.y - a.y
  const pList = [-dx, dx, -dy, dy]
  const qList = [a.x - rectLeft, rectRight - a.x, a.y - rectTop, rectBottom - a.y]

  for (let i = 0; i < 4; i++) {
    const p = pList[i]
    const q = qList[i]
    if (p === 0) {
      if (q < 0) return []
    } else {
      const t = q / p
      if (p < 0) {
        t0 = Math.max(t0, t)
      } else {
        t1 = Math.min(t1, t)
      }
      if (t0 > t1) return []
    }
  }

  const res = []
  if (t0 >= 0 && t0 <= 1) {
    res.push({ x: a.x + t0 * dx, y: a.y + t0 * dy })
  }
  if (t1 >= 0 && t1 <= 1 && t1 !== t0) {
    res.push({ x: a.x + t1 * dx, y: a.y + t1 * dy })
  }
  return res
}

边界情况说明 #

• 线段完全在矩形内部时，返回结果就是A、B两个端点
• 线段和矩形边重合时，会返回重合段的两个端点
• 线段刚好擦过矩形顶点时，会正确返回顶点坐标，不会产生重复交点
• 水平、竖直线段都能正常计算，不会出现除零错误

内容的提问来源于stack exchange，提问作者RusianNotRussian