JavaScript 检测线段与圆的相交：数学原理与代码实现

关键词：几何碰撞检测、线段圆相交算法、向量数学、Canvas 交互、JavaScript 图形编程
描述：本文深入讲解如何使用向量数学和距离计算在 JavaScript 中实现线段与圆的碰撞检测，包含完整代码示例和可视化演示。

一、问题场景与应用价值

在网页游戏开发、数据可视化或交互式图表中，经常需要判断用户鼠标轨迹（线段）是否与界面中的圆形元素相交。传统基于边界框（Bounding Box）的检测方法在圆形场景下会产生大量误判，而精确的几何检测算法能显著提升交互体验。

二、核心数学原理

2.1 关键概念拆解

• 线段表示：由两点 P1(x1,y1) 和 P2(x2,y2) 定义的有限长度直线
• 圆表示：圆心 C(cx,cy) 和半径 r
• 相交判定：圆与线段的最短距离 ≤ 半径

2.2 分步推导过程

1. 向量投影计算
   将圆心到线段起点的向量 AC 投影到线段方向向量 AB 上：
   javascript const AB = { x: x2 - x1, y: y2 - y1 }; const AC = { x: cx - x1, y: cy - y1 }; const projection = (AC.x * AB.x + AC.y * AB.y) / (AB.x * AB.x + AB.y * AB.y);

2. 最近点确定
   通过钳制（Clamp）投影值保证点在线段上：
   javascript const nearest = Math.max(0, Math.min(1, projection));

3. 距离比较
   计算最近点与圆心的欧氏距离：
   javascript const distance = Math.sqrt( Math.pow(cx - (x1 + AB.x * nearest), 2) + Math.pow(cy - (y1 + AB.y * nearest), 2) ); return distance <= radius;

三、性能优化实践

3.1 预计算优化

javascript // 提前计算重复使用的值 const AB_squared = AB.x * AB.x + AB.y * AB.y; if (AB_squared === 0) return false; // 排除零长度线段

3.2 平方比较替代开方

javascript // 用平方比较避免耗时的Math.sqrt() const rSquared = radius * radius; return distanceSquared <= rSquared;

四、完整实现代码

javascript
function isSegmentIntersectingCircle(
x1, y1, x2, y2, cx, cy, radius
) {
const AB = { x: x2 - x1, y: y2 - y1 };
const AC = { x: cx - x1, y: cy - y1 };

const ABsquared = AB.x * AB.x + AB.y * AB.y; const projection = (AC.x * AB.x + AC.y * AB.y) / ABsquared;
const nearest = Math.max(0, Math.min(1, projection));

const nearestX = x1 + AB.x * nearest;
const nearestY = y1 + AB.y * nearest;

const dx = cx - nearestX;
const dy = cy - nearestY;
const distanceSquared = dx * dx + dy * dy;

return distanceSquared <= radius * radius;
}

五、可视化验证案例

通过 Canvas 实现动态检测演示：javascript
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;

ctx.clearRect(0, 0, canvas.width, canvas.height);

// 绘制线段（从圆心到鼠标位置）
ctx.beginPath();
ctx.moveTo(circle.x, circle.y);
ctx.lineTo(mouseX, mouseY);
ctx.stroke();

// 检测并改变圆颜色
const isHit = isSegmentIntersectingCircle(
circle.x, circle.y, mouseX, mouseY,
circle.x, circle.y, circle.radius
);
ctx.fillStyle = isHit ? '#ff0000' : '#00aa00';
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
ctx.fill();
});

六、边界情况处理

1. 线段端点位于圆内
   增加端点距离检测：
   javascript const startDist = (x1-cx)**2 + (y1-cy)**2; const endDist = (x2-cx)**2 + (y2-cy)**2; if (startDist <= rSquared || endDist <= rSquared) return true;

2. 水平/垂直线段优化
   对特殊方向线段可简化计算：
   javascript if (x1 === x2) { // 垂直线 const nearestY = Math.max(y1, Math.min(y2, cy)); return Math.abs(cx - x1) <= radius && (cy - nearestY)**2 <= rSquared; }

作者思考：这种算法在物理引擎中常用于射线投射（Ray Casting），后续可以扩展实现反射角计算。实际项目中，建议将几何运算封装成独立模块，便于在碰撞检测、路径规划等场景复用。