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

Question

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

我不是很擅长数学，所以这不是我自己写的函数，它似乎可以很好地检测碰撞，但是当它到达拦截点时，我得到了我没有得到的值期待。我正在尝试以百分比的形式获取碰撞发生的直线距离，例如，如果线段是 100px 长，并且圆与它碰撞 50px 行，我希望函数返回 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) );//返回 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;
  }