在拉斐尔的一组路径上应用悬停事件 [英] Apply Hover event in Raphael on a set of paths

问题描述

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

When I put a hover event on a raphael set, the efect is apply on every diffrent path. So, when I pass over the path, it changes the fill of that single path, not the fill of the whole set at the same time.

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

For example, in this map, when you pass through canada with the mouse, the mainland changes its color, but all the ice islands stays on the same color.

这是我的代码。

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 animate方法。

I'm using the Raphaels animate method.

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

Any ideas on how can I solve this problem?

以下是整个文件app ...

Here are the files of the whole app...

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

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

And here is another question containing this one.

有人可以澄清拉斐尔的文件？ （或者知道某人已经完成过的地方）

推荐答案

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

This is the age old problem where the event you're using to highlight isn't referring to the object you think it is. Specifically the this reference.

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

It's midnight, I'm tired and I've messed with your code. Here's what I did

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

Create an object to wrap your set of paths, and setup the mouseover event to refer to the objects set. The magic here is that by using a reference to an object variable, the event will be locked to it and everything works.

所以。这是对象。我把它放在mapclasses.js的顶部

So. Heres the object. I put it at the top of 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行）

Then in the function drawSets (line 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应该是微不足道的。此外，您可能需要为每个国家/地区提供一个对象，您可能希望存储该对象。

Note: I've done this for Canada only. Also, I've only applied the mouseover. It should be trivial for you to apply the associated mouseout. Also you'll need an object for each country, which you'll probably want to store.

对不起，这不太清楚。正如我所说，现在已经很晚了。如果你愿意，我可以发送修改后的js文件，或者将它粘贴到dropbox上，但这可能违背了StackOverflow的精神。

Sorry this isn't clearer. As I said, it's late. If you want, I can send you the modified js file, or stick it onto dropbox, but that probably goes against the spirit of StackOverflow.

如果你有任何问题这个问题，我会尽力帮忙。

If you have any problems with this, ask away and I'll try to help.

祝您好运。

这篇关于在拉斐尔的一组路径上应用悬停事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！