html5-canvas - Kineticjs オーバーラップ形状のマウスオーバー検出

Question

kineticjs (または SVG で簡単な場合は rapeljs) で複数の重なり合う形状のマウスオーバー検出を行う簡単な方法はありますか? つまり、部分的に重なる 2 つの円がある場合、4 つのシナリオを何らかの形で検出したいと考えています。

1) 形状がない場合 2) 円 A を超える場合 3) 円 B を超える場合 4) 円 A と円 B の両方 (オーバーラップ) を超える場合

しかし、「n」個の円/形状に拡張できる汎用実装が必要です。

乾杯

score 5 · Accepted Answer

はい、getIntersections メソッドを使用してください。

これにより、特定のポイント (マウスの位置など) と交差するすべての KineticJS ノードが返されます。

乾杯！

score 2 · Accepted Answer

これを解決するには、明らかに衝突検出を扱っています。衝突検出アルゴリズムは、検出のためにチェックしている形状によって異なります。

まず、lineTo、arc などのメソッドを使用し、ビルトインを使用isPointInPathして検出を行い、マウス座標を渡すことができます。これは最も簡単な方法で、特に奇妙な形のポリゴンでは

    if (ctx.isPointInPath(20,50))
    {
        // code
    }

2 に答える 2