Question

编辑：我可以用角度划分半径？

问题：为了在HTML5 Canvas中学习碰撞艺术，我目前正试图让一个完整的圆圈与一个分段圆碰撞，在这种情况下是一个半圆。

我尝试过的事情：我的第一个想法是一个简单的圆圈来碰撞但是我错了。我阅读了各种关于碰撞检测的资料，但它们都是标准的圆形/圆形，方框/圆形，方框/方框或多边形碰撞公式。

我的问题：只有一个分段圈子碰撞整个圆圈的公式是什么？似乎除了半径以外的其他东西发挥作用。也许是弧度？

尝试：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var C1 = {x: 45, y: 65, radius: 20};
var C2 = {x: 60, y: 20, radius: 20};

var dx = C1.x - C2.x;
var dy = C1.y - C2.y;
var distance = Math.sqrt(dx * dx + dy * dy);

ctx.beginPath();
ctx.arc(C1.x, C1.y, C1.radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

ctx.beginPath();
ctx.rotate(0.3); 
ctx.arc(C2.x, C2.y, C2.radius, 0, Math.PI * 1);
ctx.fillStyle = 'red';
ctx.fill();

if (distance < C1.radius + C2.radius) {
    alert('true')
}
else {
    alert('false')
}

使用的演示：jsfiddle.net/tonyh90g/1

我的学习资源：https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

Answer 1

您在正确的轨道上，您确实不仅需要计算中心之间的距离，还需要计算线段上交叉点的角度。

一般情况下，笛卡尔坐标可以使用Math.atan2(dy, dx)来计算角度，其中dx和dy是从线段到圆圈的坐标差异。如果这些角度落在段的角度之间，则会有一个命中。

[注意：在触摸的确切位置只有一个点，但如果两个物体稍微重叠，这在动画中并不少见，那么你将得到两分]。

圆也可能与线段相交，而不是与线段的圆形部分相交，但我认为无论如何都会正确捕捉这些情况。这可能需要进一步调查，如果需要，还需要进行线段/圆相交测试。

我还在你的小提琴中注意到你在该扇区上使用rotate()变换。除非您具体说明，否则这将会影响您的角度计算。在整个过程中使用绝对角度可能更容易。

HTML5画布：使用分段圆圈碰撞整个圆圈

1 个答案: