解析几何：计算两条线段的交点

前端西瓜哥

于 2023-10-17 08:46:51 发布

阅读量398

点赞数

文章标签：几何学

本文链接：https://blog.csdn.net/fe_watermelon/article/details/133875741

版权

大家好，我是前端西瓜哥。

今天来实现计算两条线段的交点的解析几何算法。

我们要实现 getLineSegIntersection 方法：提供两条线段，计算它们的交点。

每条线段会用两个点坐标表示。

const getLineSegIntersection = (p1, p2, p3, p4) => {
  // 待实现
}

// 测试用例
getLineSegIntersection(
  { x: 1, y: 1 }, { x: 4, y: 4 },
  { x: 1, y: 4 }, { x: 4, y: 1 }
);
// 期望 { x: 2.5, y: 2.5 }

思路

思路很简单，就是解两条直线对应的一个二元一次方程组，求出 x 和 y。

如果无解或多解，说明直线平行，交点不存在。

如果有解，可拿到唯一交点，但也只能说明直线有交点，还需要判断线段是否有交点。

所以我们需要判断交点是否在线段的区间上。如果是，说明两线段有交点，返回交点。

克拉姆法则

解方程组需要用到 克拉姆法则。

对于：

可转换为矩阵形式表示：

然后计算主矩阵（最左边的矩阵）的行列式，对角相乘然后相减：

如果行列式为 0，说明没有唯一解；

如果不为 0，则有唯一解：

回到我们的两条直线，我们用两点式表示直线：

转换成 Ax+By=C 的格式，得到：

于是：

const a = y2 - y1;
const b = x1 - x2;
const c = x1 * y2 - x2 * y1;

第二条线段同理：

const d = y4 - y3;
const e = x3 - x4;
const f = x3 * y4 - x4 * y3;

算法实现

interface Point {
  x: number;
  y: number;
}

const getLineSegIntersection = (
  p1: Point,
  p2: Point,
  p3: Point,
  p4: Point
): Point | null => {
  const { x: x1, y: y1 } = p1;
  const { x: x2, y: y2 } = p2;
  const { x: x3, y: y3 } = p3;
  const { x: x4, y: y4 } = p4;

  const a = y2 - y1;
  const b = x1 - x2;
  const c = x1 * y2 - x2 * y1;

  const d = y4 - y3;
  const e = x3 - x4;
  const f = x3 * y4 - x4 * y3;

  // 计算分母
  const denominator = a * e - b * d;

  // 判断分母是否为 0（代表平行）
  if (Math.abs(denominator) < 0.000000001) {
    // 这里有个特殊的重叠但只有一个交点的情况，可以考虑处理一下
    return null;
  }

  const px = (c * e - f * b) / denominator;
  const py = (a * f - c * d) / denominator;

  // 判断交点是否在两个线段上
  if (
    px >= Math.min(x1, x2) &&
    px <= Math.max(x1, x2) &&
    py >= Math.min(y1, y2) &&
    py <= Math.max(y1, y2) &&
    px >= Math.min(x3, x4) &&
    px <= Math.max(x3, x4) &&
    py >= Math.min(y3, y4) &&
    py <= Math.max(y3, y4)
  ) {
    return { x: px, y: py };
  }

  return null;
};