当我将悬停事件放在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)
答案 0 :(得分:7)
这是一个古老的问题,您用来突出显示的事件并不是指您认为的对象。特别是 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的精神。
如果您对此有任何疑问,请随便提出,我会尽力帮助。
祝你好运。