JavaScript 查找交点

简介

在前端开发中，经常需要对不同元素进行位置关系的判断和计算，其中一个常见的问题是求两个线段的交点。本文将介绍如何用 JavaScript 查找两个线段的交点，并提供相关代码示例。

计算方式

两条线段的交点可以通过两条直线的解析式来计算得到，以下是两条直线的一般式和斜截式：

一般式：ax + by + c = 0

斜截式：y = kx + b

其中，a，b，c 为一般式的系数，k，b 为斜截式的系数。两个不同直线的系数一般都是不同的。

两条直线的交点坐标可以通过它们的系数进行计算，如下公式所示：

x = (b2 - b1) / (a1 - a2)

y = (-c1 - a1 * x) / b1

通过上述公式，可以计算出两条直线的交点坐标。但这种计算方式需要特别注意分母的值不能为 0。

代码示例

以下是使用 JavaScript 实现通过两个线段的坐标计算交点的示例：

/**
 * 计算线段交点
 * @param {number[]} p1 线段1起点
 * @param {number[]} p2 线段1终点
 * @param {number[]} p3 线段2起点
 * @param {number[]} p4 线段2终点
 * @return {number[]} 返回交点坐标，若不存在则返回 null
 */
function getIntersectionPoint(p1, p2, p3, p4) {
  const [x1, y1] = p1
  const [x2, y2] = p2
  const [x3, y3] = p3
  const [x4, y4] = p4

  // 计算两条直线的系数
  const a1 = y2 - y1
  const b1 = x1 - x2
  const c1 = x2 * y1 - x1 * y2

  const a2 = y4 - y3
  const b2 = x3 - x4
  const c2 = x4 * y3 - x3 * y4

  // 计算交点坐标
  const denominator = a1 * b2 - a2 * b1
  if (denominator === 0) return null
  const x = (b2 * c1 - b1 * c2) / denominator
  const y = (a1 * c2 - a2 * c1) / denominator

  // 判断交点是否在两个线段之间
  if (
    x < Math.min(x1, x2) ||
    x > Math.max(x1, x2) ||
    y < Math.min(y1, y2) ||
    y > Math.max(y1, y2) ||
    x < Math.min(x3, x4) ||
    x > Math.max(x3, x4) ||
    y < Math.min(y3, y4) ||
    y > Math.max(y3, y4)
  ) {
    return null
  }

  return [x, y]
}

以上代码实现了一个 getIntersectionPoint 函数，它接收 4 个参数，分别是两个线段的起点和终点坐标，返回值为交点坐标。如果两条线段不存在交点，则函数返回 null。

测试样例

以下是一些测试样例，可以验证上述代码的正确性：

console.log(getIntersectionPoint([0, 0], [4, 4], [0, 4], [4, 0])) // [2, 2]
console.log(getIntersectionPoint([0, 0], [4, 4], [0, 3], [4, 1])) // [2, 2]
console.log(getIntersectionPoint([0, 0], [4, 4], [0, 5], [4, 1])) // null
console.log(getIntersectionPoint([0, 0], [4, 4], [1, 1], [2, 2])) // null

以上代码的运行结果分别应该是 [2, 2]、[2, 2]、null 和 null。

总结

求解线段交点是一种非常常见的计算问题，在前端开发中也有广泛的应用。本文介绍了一种基于两条直线解析式的计算方法，并提供了相应的 JavaScript 代码示例，希望可以帮助读者更好地理解和应用该技术。