javascript - HTML5 Canvas : Colliding a full circle with a segmented circle

Question

编辑:我可以用半径除以 Angular 吗？

问题:为了学习 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

您的方向是正确的，您确实不仅需要计算中心之间的距离，还需要计算线段上交点的 Angular 。

在一般笛卡尔坐标中，可以使用 Math.atan2(dy, dx) 计算 Angular ，其中 dx 和 dy 是从线段到圆的坐标。如果这些 Angular 落在线段的 Angular 之间，则您成功了。

[注意:在触摸的确切位置只有一个点，但如果两个对象最终稍微重叠(这在动画中并不罕见)，您将获得两个点]。

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

我还在你的 fiddle 中注意到你在扇区上使用rotate()转换。除非您特别考虑它，否则这会扰乱您的 Angular 计算。在整个过程中使用绝对 Angular 可能会更容易。