Question

我有一个使用JS和Fabric.js的动画，其中圈子更多地围绕着屏幕。我试图将它们包含在特定区域但有一些问题。

昨天经过一番阅读后，我认为测试圈子是否在矩形内（他们的容器）会很简单但是我还没有让它正常工作。

圆圈创建在屏幕底部，也就是容器所在的位置。使用我所拥有的代码，他们可以“浮动”到顶部，并在一个地方停留。

控制台记录我已经指出它们立即在矩形之外，所以我假设我的碰撞功能有问题。

我的目标是让他们留在容易移动的地方，当他们碰到边缘时，他们应该改变方向，这样他们就会再呆在里面。

感谢您的帮助。

编辑：编辑以启用明确的接触并使用以下答案进行COLSIOSN检测，因为现在认为问题与检测中的响应有关。

碰撞功能：

function testCollision（circle，rectangle）{

return circle.left + circle.radius < rectangle.left + rectangle.width/2 //right side
    && circle.left - circle.radius < rectangle.left - rectangle.width/2 //left side
    && circle.top + circle.radius < rectangle.top + rectangle.height/2 //top
    && circle.top - circle.radius < rectangle.top - rectangle.height/2;

}

左= x＆amp; top = y

有maxX和maxY值，即容器的宽度和高度这是测试：

if(testCollision(circle, rect) == false){
        var r = Math.atan2(y - maxY / 2, x - maxX / 2);
        vx = -Math.cos(r);
        vy = -Math.sin(r);
    }

非常感谢任何帮助，谢谢！

Answer 1

我看到它的方式，由中心和半径的（x，y，r）坐标定义的圆是在由中心的（x，y，w，h）坐标定义的轴对齐矩形内，宽度和高度，如果圆的顶部，右侧，底部，左侧的4个点都在矩形内：

function testCollision(circle, rectangle) {
  return circle.x + circle.r < rectangle.x + rectangle.w/2
      && circle.x - circle.r > rectangle.x - rectangle.w/2
      && circle.y + circle.r < rectangle.y + rectangle.h/2
      && circle.y - circle.r > rectangle.y - rectangle.h/2
}

我认为y的正向是朝向底部，就像在网络上的坐标系中一样。

碰撞响应问题 - 矩形内的基本圆

1 个答案: