Question

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

例如，在这张地图中，当你用鼠标穿过加拿大时，大陆会改变它的颜色，但是所有的冰岛都保持相同的颜色。

这是我的代码。

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);
    });

    }   
},

我正在使用Raphaels动画方法。

关于如何解决这个问题的任何想法？

以下是整个应用程序的文件......

http://www.megaupload.com/?d=GHQ5HATI

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

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

Answer 1

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

已经是午夜了，我累了，而且我已经搞砸了你的代码。这就是我做的事情

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

因此。这是对象。我把它放在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文件，或者将其粘贴到dropbox上，但这可能违背了StackOverflow的精神。

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

祝你好运。

在拉斐尔的一组路径上应用悬停事件

1 个答案: