javascript - 在一组路径上应用 Raphael 中的悬停事件

Question

当我在 raphael 集上放置悬停事件时，该效果会应用于每个不同的路径。因此，当我越过路径时，它会更改单个路径的填充，而不是同时更改整个路径集的填充。

例如，在这张 map 中，当您用鼠标经过加拿大时，大陆会改变颜色，但所有的冰岛都保持相同的颜色。

这是我的代码。

drawSets: function(){
    for (country in this.setsArr){
        var setset= R.set();
        var zone = this.setsArr[country];
        for (group in zone){
            var path = R.path(this.setsArr[country][group].path);

            setset.push(
                path
            );
        }

        var attri = this.options.attributes;
        setset.attr(attri);
        var x = this.setsArr[country].translate.x;
        var y = this.setsArr[country].translate.y;
        setset.translate(x,y);

        setset.hover(function(){
            this.animate({
                fill: '#000'
            }, 300);
        }, function(){
        this.animate({
            fill: attributes.fill
        }, 300);
    });

    }   
},

我正在使用拉斐尔的动画方法。

关于如何解决这个问题有什么想法吗？

这是另一个包含这个问题的问题。

Can someone clarify Raphael's documentation? (or know a place in which someone already has done it)

Answer 1

这是一个古老的问题，您用来突出显示的事件并不是指您认为的对象。特别是 this 引用。

现在是午夜，我累了，我把你的代码弄乱了。这是我做的

创建一个对象来包装您的路径集，并设置鼠标悬停事件以引用对象集。这里的神奇之处在于，通过使用对对象变量的引用，事件将被锁定到它并且一切正常。

所以。继承人的对象。我把它放在 mapclasses.js 的顶部

function setObj(country,myset)
{
    var that = this;
    that.country = country;
    that.myset = R.set();

    that.setupMouseover = function()
    {
        that.myset.mouseover(function(event){
            myvar = that;   
            // in the mouseover, we're referring to a object member that.myset
            // the value is locked into the anonymous object
            that.myset.attr({"fill":"#ffaa00"});
        });
    }

    that.addPath = function(newpath)
    {
       that.myset.push(newpath); 
    }

    return that;
}

然后在函数 drawSets 中(第 80 行)

drawSets: function(){
    for (country in this.setsArr){
        var setset= R.set();
                    var holderObj = null;
                    //
                    // Create an object to hold all my paths
                    //
                    if (country == 'canada')
                    {
                       holderObj = setObj (country, setset);
                    }
        var zone = this.setsArr[country];
        for (group in zone){
            var path = R.path(this.setsArr[country][group].path);

            setset.push(path);
                            if (country == 'canada')
                            {
                               // add the path to the holder obj
                               holderObj.addPath(path);
                            }
        }

                    if (country == 'canada')
                    {
                       // once all paths for the object are loaded, create a mouseover
                       // event
                       holderObj.setupMouseover();
                    }

        var attri = this.options.attributes;
        setset.attr(attri);
        var x = this.setsArr[country].translate.x;
        var y = this.setsArr[country].translate.y;
        setset.translate(x,y);



    }   
}

注意:我只为加拿大做过这件事。另外，我只应用了鼠标悬停。应用关联的 mouseout 对您来说应该是微不足道的。此外，您还需要针对每个国家/地区的对象，您可能希望存储该对象。

抱歉，这不是更清楚。正如我所说，已经晚了。如果您愿意，我可以将修改后的 js 文件发送给您，或者将其粘贴到保管箱中，但这可能违背了 StackOverflow 的精神。

如果您对此有任何疑问，请提出来，我会尽力提供帮助。

祝你好运。