if-statement - カーソルが Raphael.js の要素の上にあるかどうかを判断する

Question

カーソルが Raphael.js の特定の要素の上にあるかどうかをどのように確認できますか?

if(mouse_is_over){
   //do this 
}
else{   
   //do this 
}

理想的には、「c」という名前の円の上にマウスがあるかどうかをテストしたいと思います。

ありがとう！

Answer 1

Raphael のElement.dataメソッドを使用して、サークル固有のプライベート データを各アイテムに関連付け、ホバー ハンドラーでそのデータに基づいて操作することを強くお勧めします (getElementByPoint との交差を手動で検出すると、マウスオーバー ハンドラーでコストがかかる場合があります)。あなたは何でも保存することができますdata：

var circle = paper.circle( ... );
circle.data( 'name', "My name is Jonas." ); // store a string!
circle.data( 'dataset', { ... } );          // store an object literal!
circle.data( 'click_handler', function()
    {
        console.log("Store a handler function!" );
    } );

この時点で、ゲームは非常に簡単になります。Raphael の組み込みのホバー処理を使用するかどうか...

circle.hover( function()
    {
        console.log("Just moved over '" + this.data("name") + "'" );
    }, function()
    {
        console.log("Just moved out of '" + this.data("name") + "'" );
    } );

...または、たとえば jQuery を利用したマウスオーバー イベント...

//  Don't forget to translate page coordinates relative to the paper!
var element = paper.getElementByPoint( x, y );
if ( element && element.data("name") == "c" )
{
    // bah, humbug
}

...ロジックは同じです。要素に関連付けたアプリケーション データをクエリするだけで、目的の作業を実行できます。

私はたまたま、ランダムな場所で円をアニメーション化するひどい小さなスクリプトをすでに持っていたので、あなたのシナリオに対応するためにそれを改造しました.