检查圆边界内的碰撞

Question

我正在尝试用一些线条相似的精灵填充圆圈。我在 +- 半径内生成随机位置 x 和 y，但我想在它不与圆边界相交时绘制精灵，例如：

我想画绿线，而红线 - 我不想画。我想知道一些可以帮助快速检测不需要的精灵的想法。有什么我可以用于此目的的吗？我正在使用 pixi.js 并且精灵的高度和宽度始终相同。

Answer 1

一个简单的想法可能是以下一个：

对于线段（线？），由两点 P1 = (x0,y0) 和 P2 = (x1, y1) 定义。圆由圆心 R = (xc, yc) 和半径 r.

定义

现在检查

距离 P1 - C < r，也表示点在圆内
距离 P2 - C < r，（相同）

如果两者都为真，绿线！根据您使用的库，您可能会找到一种方法 pointIsInCircle 可以完成一半的工作。

这是来自 w3resource

的一个简单示例

function check_a_point(a, b, x, y, r) {
    var dist_points = (a - x) * (a - x) + (b - y) * (b - y);
    r *= r;
    if (dist_points < r) {
        return true;
    }
    return false;
}

检查圆边界内的碰撞

Check collision within circle bounds

javascript

graphics

2d

collision