Question

我有一个用Javascript html5画布创建的圆圈，在那个圆圈内我创建了一个小圆圈，我用我的箭头键移动，有人可以帮助我如何检测小圆圈何时触及大圆圈？我对这个东西很新。

Answer 1

假设你的大圆由bigX，bigY和小圆圈描述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 - ＆gt;圆心的坐标

R - ＆gt;圆的半径

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;
}

Answer 2

做数学！我不知道是否有一个很好的编码方式为你做这个，但如果你有大（x1，y1）和小（x2，y2）圆的中心的坐标，和半径小圆圈，你可以比较距离

sqrt((x1-x2)^2 + (y1 - y2)^2) + (small radius)

到大半径，如果上面的表达式大于或等于大半径，它们就会触及：）

圆形对象内圆角边框检测

2 个答案: