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
}

...逻辑是一样的。只需查询您与元素关联的应用程序数据并做您的事情。

我碰巧已经有一个可怕的小脚本，可以在随机位置为圆圈设置动画，我对其进行了改装以适应您的场景。