本文详细介绍了如何使用 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;}
代码解释：
立即学习“Java免费学习笔记（深入）”；
ray: 包含线段起点 p1 和终点 p2 的对象。circle: 包含圆心坐标 x, y 和半径 radius 的对象。dx 和 dy：线段的 x 和 y 方向上的差值。u: 线段上距离起点 p1 最近的点与圆心连线，该点在线段上的比例，范围是 [0, 1]。Math.min(1, Math.max(0, …)) 确保 u 的值始终在线段范围内。nx 和 ny: 线段上距离圆心最近的点与圆心的 x 和 y 轴距离。nx * nx + ny * ny
使用示例：
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;}
代码解释：
立即学习“Java免费学习笔记（深入）”；
ray: 包含线段起点 p1 和终点 p2 的对象。circle: 包含圆心坐标 x, y 和半径 radius 的对象。dx 和 dy：线段的 x 和 y 方向上的差值。vcx 和 vcy: 线段起点 p1 到圆心的 x 和 y 轴距离。v: 一个中间变量，用于简化后续计算。dd: 判别式，如果小于等于 0，则表示线段与圆不相交。(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 中使用这两种方法检测线段与圆的相交，并根据结果绘制不同的颜色。
线段与圆相交检测 canvas { position: absolute; top: 0px; left: 0px;}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);}
总结：
本文提供了两种在 JavaScript 中检测线段与圆相交的方法。第一种方法避免了平方根的计算，适用于对性能要求较高的场景。第二种方法可以提供更多信息，例如交点的位置，适用于需要进一步处理碰撞事件的场景。开发者可以根据实际需求选择合适的方法。
以上就是JavaScript 中检测线段与圆的相交的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1510215.html
微信扫一扫 
支付宝扫一扫 
