确定光标是否在 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
}

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

我碰巧已经有一个糟糕的小脚本，可以在随机位置为圆圈设置动画，我retrofitted it 来适应你的场景。