javascript - 圆 Angular 内的圆形物体边界检测

Question

我在Javascript html5 Canvas 中创建了一个圆圈，在该圆圈内我创建了一个小圆圈，我用箭头键移动它，有人可以帮助我如何检测小圆圈何时接触大圆圈吗？我对这些东西很陌生。

Answer 1

假设你的大圆由bigX，bigY，bigR描述，小圆由smX，smY，smR描述，你需要大圆的中心和小圆的中心之间的距离最多为大半径减去小半径:

function isIn(bigX, bigY, bigR, smX, smY, smR) {
  var distSquared = (bigX - smX) * (bigX - smX) + (bigY - smY) * (bigY - smY);
  return (bigR - smR) * (bigR - smR) >= distSquared;
}

X、Y -> 圆心坐标

R -> 圆的半径

PS:我没有提取平方根，因为通常乘法会快得多。

编辑:显然，如果你想检查它们是否接触，那么距离必须相等，不能大于:

function isTouching(bigX, bigY, bigR, smX, smY, smR) {
  var distSquared = (bigX - smX) * (bigX - smX) + (bigY - smY) * (bigY - smY);
  return (bigR - smR) * (bigR - smR) == distSquared;
}

EDIT2:与 Ken - Abdias 的评论一致:

浮点比较可能会意外失败，因此最好使用带有容差的比较函数而不是 == 运算符:

function almostEqual (a, b, tolerance) {
  tolerance = tolerance != null ? tolerance : 0.000001;
  return Math.abs(a-b) <= tolerance;
}