登录
首页 >  文章 >  前端

JavaScript线段与圆相交判断方法

时间：2025-07-15 16:51:38 401浏览 收藏

推广推荐
免费电影APP ➜
支持 PC / 移动端，安全直达

在HTML5 Canvas游戏开发中，碰撞检测至关重要。本文深入探讨了JavaScript中检测线段与圆相交的高效方法，并提供优化方案。针对线段与圆相交检测，文章提供了两种核心算法：一是通过计算线段到圆心的距离，巧妙避免了昂贵的平方根运算，显著提升性能；二是计算线段与圆的交点距离，为进一步处理碰撞事件提供便利。本文提供详细的代码示例和解释，助力开发者快速掌握并在实际项目中应用这些技术，优化游戏体验，实现更精确的碰撞效果。无论您是初学者还是经验丰富的开发者，都能从中受益。

JavaScript 中检测线段与圆的相交

本文详细介绍了如何使用 JavaScript 检测线段与圆是否相交，并提供两种优化后的方法。第一种方法通过计算线段到圆心的距离来判断是否相交，避免了昂贵的平方根计算。第二种方法则返回线段与圆的交点距离，方便进一步处理碰撞事件。同时，提供完整的示例代码，帮助开发者理解和应用这些技术。

在 HTML5 Canvas 游戏中，碰撞检测是一个至关重要的环节。本文将深入探讨如何使用 JavaScript 检测线段与圆是否相交，并提供两种高效且易于理解的实现方法。

方法一：避免平方根的相交检测

该方法的核心思想是计算线段到圆心的最短距离，并将其与圆的半径进行比较。如果该距离小于半径，则线段与圆相交。这种方法避免了平方根的计算，提高了性能。

function rayInterceptsCircle(ray, circle) {    
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const u = Math.min(1, Math.max(0, ((circle.x - ray.p1.x) * dx + (circle.y - ray.p1.y) * dy) / (dy * dy + dx * dx)));
    const nx = ray.p1.x + dx * u - circle.x;
    const ny = ray.p1.y + dy * u - circle.y;    
    return nx * nx + ny * ny < circle.radius * circle.radius;
}

代码解释：

  1. ray: 包含线段起点 p1 和终点 p2 的对象。
  2. circle: 包含圆心坐标 x, y 和半径 radius 的对象。
  3. dx 和 dy：线段的 x 和 y 方向上的差值。
  4. u: 线段上距离起点 p1 最近的点与圆心连线，该点在线段上的比例，范围是 [0, 1]。Math.min(1, Math.max(0, ...)) 确保 u 的值始终在线段范围内。
  5. nx 和 ny: 线段上距离圆心最近的点与圆心的 x 和 y 轴距离。
  6. nx * nx + ny * ny < circle.radius * circle.radius: 如果最近点到圆心的距离的平方小于半径的平方，则线段与圆相交。

使用示例：

const Point = (x, y) => ({x, y}); 
const Ray = (p1, p2) => ({p1, p2}); 
const Circle = (p, radius) => ({x: p.x, y: p.y, radius});

const c1 = Circle(Point(150, 120), 60);
const r1 = Ray(Point(0, 50), Point(300, 50));

if (rayInterceptsCircle(r1, c1)) {
    console.log("线段与圆相交！");
} else {
    console.log("线段与圆不相交！");
}

方法二：计算交点距离

该方法返回线段与圆的交点距离，如果线段与圆不相交，则返回 Infinity。该方法需要计算平方根，但可以提供更多信息，例如交点的位置。

function rayDist2Circle(ray, circle) {
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const vcx = ray.p1.x - circle.x; 
    const vcy = ray.p1.y - circle.y;
    var v =  (vcx * dx +  vcy * dy) * (-2 / Math.hypot(dx, dy));
    const dd = v * v - 4 * (vcx * vcx + vcy * vcy - circle.radius * circle.radius);
    if (dd <= 0) { return Infinity; }
    return  (v - Math.sqrt(dd)) / 2;
}

代码解释：

  1. ray: 包含线段起点 p1 和终点 p2 的对象。
  2. circle: 包含圆心坐标 x, y 和半径 radius 的对象。
  3. dx 和 dy：线段的 x 和 y 方向上的差值。
  4. vcx 和 vcy: 线段起点 p1 到圆心的 x 和 y 轴距离。
  5. v: 一个中间变量，用于简化后续计算。
  6. dd: 判别式，如果小于等于 0，则表示线段与圆不相交。
  7. (v - Math.sqrt(dd)) / 2: 计算线段与圆的交点距离。

使用示例：

const Point = (x, y) => ({x, y}); 
const Ray = (p1, p2) => ({p1, p2}); 
const Circle = (p, radius) => ({x: p.x, y: p.y, radius});

const c1 = Circle(Point(150, 120), 60);
const r1 = Ray(Point(0, 50), Point(300, 50));

const distance = rayDist2Circle(r1, c1);

if (distance === Infinity) {
    console.log("线段与圆不相交！");
} else {
    console.log("线段与圆相交，交点距离为：", distance);
}

完整示例代码

以下是一个完整的示例，演示了如何在 HTML5 Canvas 中使用这两种方法检测线段与圆的相交，并根据结果绘制不同的颜色。

<!DOCTYPE html>
<html>
<head>
<title>线段与圆相交检测</title>
<style>
canvas {
  position: absolute;
  top: 0px;
  left: 0px;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="250"></canvas>
<script>
const ctx = canvas.getContext("2d");
const TAU = Math.PI * 2;
requestAnimationFrame(renderLoop);
var W = canvas.width, H = canvas.height;


const Point = (x, y) => ({x, y}); 
const Ray = (p1, p2) => ({p1, p2}); 
const Circle = (p, radius) => ({x: p.x, y: p.y, radius});

function drawRayLeng(ray, len) {
  ctx.beginPath();
  ctx.lineTo(ray.p1.x, ray.p1.y);
  if (len < Infinity) {
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const scale = len / Math.hypot(dx, dy);
    ctx.lineTo(ray.p1.x + dx * scale , ray.p1.y + dy  * scale);
  } else {
    ctx.lineTo(ray.p2.x, ray.p2.y);
  }
  ctx.stroke();
}
function drawRay(ray) {
  ctx.beginPath();
  ctx.lineTo(ray.p1.x, ray.p1.y);
  ctx.lineTo(ray.p2.x, ray.p2.y);
  ctx.stroke();
}
function drawCircle(circle) {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, TAU);
  ctx.stroke();
}
function rayInterceptsCircle(ray, circle) {    
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const u = Math.min(1, Math.max(0, ((circle.x - ray.p1.x) * dx + (circle.y - ray.p1.y) * dy) / (dy * dy + dx * dx)));
    const nx = ray.p1.x + dx * u - circle.x;
    const ny = ray.p1.y + dy * u - circle.y;    
    return nx * nx + ny * ny < circle.radius * circle.radius;
}
function rayDist2Circle(ray, circle) {
    const dx = ray.p2.x - ray.p1.x;
    const dy = ray.p2.y - ray.p1.y;
    const vcx = ray.p1.x - circle.x; 
    const vcy = ray.p1.y - circle.y;
    var v =  (vcx * dx +  vcy * dy) * (-2 / Math.hypot(dx, dy));
    const dd = v * v - 4 * (vcx * vcx + vcy * vcy - circle.radius * circle.radius);
    if (dd <= 0) { return Infinity; }
    return  (v - Math.sqrt(dd)) / 2;
}
const mouse  = {x : 0, y : 0}
function mouseEvents(e){
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}
document.addEventListener("mousemove", mouseEvents);

const c1 = Circle(Point(150, 120), 60);
const r1 = Ray(Point(0, 50), Point(300, 50));


function renderLoop(time) {
   ctx.clearRect(0, 0, W, H);
   r1.p1.x = c1.x + Math.cos(time / 5000) * 100;
   r1.p1.y = c1.y + Math.sin(time / 5000) * 100;
   r1.p2.x = mouse.x;
   r1.p2.y = mouse.y;

   ctx.lineWidth = 0.5;
   drawCircle(c1);
   drawRay(r1);
   ctx.lineWidth = 5;
   if (rayInterceptsCircle(r1, c1)) {
     ctx.strokeStyle = "red";
     drawRayLeng(r1, rayDist2Circle(r1, c1));
   } else {
     drawRay(r1);
   }

   ctx.strokeStyle = "black";
   requestAnimationFrame(renderLoop);
}
</script>
</body>
</html>

总结：

本文提供了两种在 JavaScript 中检测线段与圆相交的方法。第一种方法避免了平方根的计算，适用于对性能要求较高的场景。第二种方法可以提供更多信息，例如交点的位置，适用于需要进一步处理碰撞事件的场景。开发者可以根据实际需求选择合适的方法。

本篇关于《JavaScript线段与圆相交判断方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>