2

私は HTML キャンバスに線を描いていますが、精度の低い 2D 配列 (10x10 ピクセルのブロックを表す) を使用して、Bresenham のアルゴリズムで線を「描画」して線 ID を格納しているので、その配列を使用してどの行が選択されます。

これは機能しますが、より正確にしたいと思います-使用する10x10サイズではありません(線をクリックする必要がないのが好きです)が、実際の配列の上にその配列の表現を描画するとcanvas を見ると、線が交差しているにもかかわらず、10x10 のブロックが塗りつぶされていないことがわかります。

ここに画像の説明を入力

これに対するより良い解決策はありますか？私が望むのは、実際のラインが通過するすべてのグリッド ブロックをキャッチすることです。

4

2 に答える 2

1

最良のオプションは、マウス カーソルの位置を小さな円 (半径 5px の fe) として扱い、線が円と交差するかどうかを確認することです。

このQ&Aで説明されているように数学を使用してください

JavaScript

交差を検出する単純な関数は次のようになります。

function lineCircleIntersects(x1, y1, x2, y2, cx, cy, cr) {
    var dx = x2 - x1,
        dy = y2 - y1,
        a = dx * dx + dy * dy,
        b = 2 * (dx * (x1 - cx) + dy * (y1 - cy)),
        c = cx * cx + cy * cy,
        bb4ac;

    c += x1 * x1 + y1 * y1;
    c -= 2 * (cx * x1 + cy * y1);
    c -= cr * cr;
    bb4ac = b * b - 4 * a * c;

    return bb4ac >= 0;  // true: collision, false: no collision
}

このjsFiddletrueで動作していることを確認してください。ただし、カーソルが [x1, y1]、[x2, y2] の外側の線の傾きにある場合にも、この関数が返されることに注意してください。これはあなたに任せます:)

github で line-circle-collision ライブラリを試すこともできます。これにより、必要なものが得られます。

于 2015-01-18T16:13:38.040 に答える