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

Question

我有一个使用JS和Fabric.JS的动画，可以在屏幕上画更多的圆圈。我试图将它们限制在一个特定的区域，但遇到了一些问题。

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

圆圈是在屏幕底部创建的，也是它们的容器所在的地方。使用我的代码，它们"漂浮"到顶部并停留在一个位置。

我的控制台日志表明它们立即在矩形之外，所以我假设我的碰撞函数有问题。

我的目标是让它们留在里面，四处移动，当它们碰到边缘时，它们应该改变方向，这样它们就会再次留在里面。

谢谢你的帮助。

EDIT：经过编辑以实现一点清晰，并使用下面的coliosn检测答案，因为现在认为问题在于响应而不是检测。

碰撞功能：

函数测试碰撞(圆形、矩形)｛

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;

}

left＝x&顶部=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)坐标定义的圆在一个n轴对齐的矩形内，该矩形由中心的(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的正方向是朝向底部，这在网络上的坐标系中是常见的。