如何获得发生碰撞的直线的百分比？

Question

我正在使用此碰撞检测功能来确定 A) 线段是否与圆相交，以及 B) 发生碰撞的线段向下多远。

我不是很擅长数学所以这不是我自己写的函数，它似乎可以很好地检测碰撞，但是当它到达拦截点时，我得到的值是我没想到。我正在尝试以百分比的形式获取碰撞发生的直线距离，例如，如果线段是 100px 长，并且圆与直线相撞 50px，我希望函数为 return 50px，从中我可以很容易地计算出百分比。

function interceptOnCircle(p1, p2, c, r) {
  console.log(arguments);
  //p1 is the first line point
  //p2 is the second line point
  //c is the circle's center
  //r is the circle's radius
  var p3 = {
    x: p1.x - c.x,
    y: p1.y - c.y
  }; //shifted line points
  var p4 = {
    x: p2.x - c.x,
    y: p2.y - c.y
  };
  var m = (p4.y - p3.y) / (p4.x - p3.x); //slope of the line
  var b = p3.y - m * p3.x; //y-intercept of line
  var underRadical = Math.pow(r, 2) * Math.pow(m, 2) + Math.pow(r, 2) - Math.pow(b, 2); //the value under the square root sign
  if (underRadical < 0) {
    //line completely missed
    return false;
  } else {
    var t1 = (-m * b + Math.sqrt(underRadical)) / (Math.pow(m, 2) + 1); //one of the intercept x's
    var t2 = (-m * b - Math.sqrt(underRadical)) / (Math.pow(m, 2) + 1); //other intercept's x
    var i1 = {
      x: t1 + c.x,
      y: m * t1 + b + c.y
    }; //intercept point 1
    var i2 = {
      x: t2 + c.x,
      y: m * t2 + b + c.y
    }; //intercept point 2
    console.log('Collision points: [' + i1.x + ', ' + i1.y + '], [' + i2.x + ', ' + i2.y + ']')
    var distance = Math.hypot(p1.x - i2.x, p1.y - i2.y);
    return distance;
  }
}

对于 50px 长的行之间的冲突，我收到此日志：

Collision points: [111.91311159515845, 90.88529912057992], [92.30169719247377, 112.87385466298396]

与 var distance = Math.hypot(p1.x - i2.x, p1.y - i2.y); 导致值比行本身长。我希望 distance 值介于 0 和 50 之间。如何获得发生碰撞的直线（来自 p1）的百分比？

编辑：为了验证我正在测试的线的长度是否正确，我用 console.log(Math.hypot(p1.x - p2.x, p1.y - p2.y)); //returns 49

进行了测试

Answer 1

我认为问题可能在于您没有将解决方案限制在两个原始点之间。

您正在计算与 y = mx + c 给出的线的交点，其中 m 是从两个点计算出的梯度，c 是第一个点，但这是一条线无限长，所以你可以得到两个原始点之外的交点。

最简单的就是按要求计算百分比，然后得出结论，任何小于 0 或大于 100% 的东西实际上都不是与两点之间的线段的有效交点。

var length = Math.hypot(p1.x - p2.x, p1.y - p2.y);
  var distance1 = Math.hypot(p1.x - i2.x, p1.y - i2.y);
  var distance2 = Math.hypot(p1.x - i1.x, p1.y - i1.y);
  var lowerBounds = Math.min(distance1, distance2);
  if (lowerBounds < length) {
    return lowerBounds;
  } else {
    return false;
  }

如何获得发生碰撞的直线的百分比？

How do I get the percentage along a line that a collision is occurring?

javascript

algorithm

collision-detection