var paper1 = Raphael(10,50,960,560);
var mapShape1 = paper1.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z");
var mapShape2 = paper1.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z");
var mapShape3 = paper1.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z");
我将它们设计成这样:(我相信这可以改进,有没有办法一次完成所有路径？)
function style1(shape){
shape.attr({
"fill": "#33CCFF","stroke": "000000","stroke-width": "5"
});
}
style1(mapShape1);
style1(mapShape2);
style1(mapShape3);
但我的问题是如何在所有路径上使用单个悬停功能,我有这个：
mapShape1.hover(
function(){
this.animate({
"fill": "#FF3300"
},500);
},function(){
this.animate({
"fill": "#33CCFF"
},500)
}
);
但它一次只适用于一种形状,我想这样做
$(mapShape1,mapShape2,mapShape3).hover(...
但这不起作用.我错过了什么？
解决方法
设置处理
明确的
这意味着您自己管理集合,并自行添加元素集
var paper,shapeA,shapeB,shapeC,elementSet;
paper = Raphael(10,560);
elementSet = paper.set();
shapeA = paper.path("M339.098,175.503z");
shapeB = paper.path("M548.902,292.157-4.575V306.876z");
shapeC = paper.path("M296.614,86.614z");
// now add A and C to the set,as well as a rectangle
elementSet.push(
shapeA,paper.rect(10,10,2)
);
通过这种方式,您可以完全控制进入集合的内容以及不进入集合的内容.
含蓄
您还可以在绘制元素时标记起点和终点.在start和endpoint之间绘制的任何元素都将添加到集合中.
var paper,shapA,560);
paper.setStart();
shapeA = paper.path("M339.098,86.614z");
paper.rect(10,2);
elementSet = paper.setFinish();
变量elementSet现在包含形状A,B和C以及矩形.
明确还是隐含？
我个人建议总是使用显式方法.通过这种方式,您可以100％控制进入您设置的内容和不进入的内容.另外,我发现setStart()和setFinish()要向后命名,我们用“set”“开始”,我们不是“设置”“开始”.如果您现在意图这可能是显而易见的,但这正是模糊命名的危险 – 下一个开发者可能不知道并假设不同的东西.
更多用法
对于我们创建的应用程序,我们必须绘制,删除,更新和重新定位复杂的元素组.为了实现这一目标,我们大量使用了套装.除了集合允许您在集合中的每个元素上应用属性这一事实,集合还允许您将其用作DTO.
例如,以下工作：
var elementSet = paper.set();
elementSet.push(elemA,elemB,elemC);
elementSet.myApp.someDTO = {
property: value,something: else
};
为了一致性和清晰度,我倾向于使用myApp作为命名空间.
它的美妙之处在于即使someDTO包含Raphael元素,您在该集合上应用的任何内容都不会应用于DTO中的元素.这使得它可以在您需要时传递上下文,坐标等.
使用集合
现在回到使用集合的好处.让我们在这里查看您的用例：
您想要应用属性并将鼠标悬停在任意数量的路径上.
如果我们在上面的显式示例中创建一个集合,我们最终会得到以下结果：
var paper,elementSet;
paper = Raphael(10,560);
elementSet = paper.set();
elementSet.push(
paper.path("M339.098,175.503z"),paper.path("M548.902,292.157-4.575V306.876z"),paper.path("M296.614,86.614z"),);
现在在集合上应用样式：
elementSet.attr({
fill: '#33CCFF',stroke: '#000000','stroke-width': 5
});
然后添加悬停：
elementSet.hover(
function(){
this.animate({
"fill": "#FF3300"
},function(){
this.animate({
"fill": "#33CCFF"
},500)
}
);
elementSet.push(
/* elements */
).attr({
/* attributes */
}).hover(
/* hover fn's
);
要查看最终结果,请查看a fiddle here
扩展的悬停功能
如果要将onhover突出显示应用于所有元素,您可以再次应用该集合上的属性：
onMouSEOver: function () { elementSet.animate({ fill: '#FF3300' },500); }; onMouSEOut: function () { elementSet.animate({ fill: '#33CCFF' },500); }; elementSet.hover(onMouSEOver,onMouSEOut);
可以在here找到一个小提琴
使用jQuery
为了能够通过jQuery绑定悬停功能,必须访问元素的nodes.元素本身不是DOM节点,而是Raphael对象.通过使用element.node,可以在该节点上使用jquery来添加行为.我个人的经验是,它的工作正常,但你永远不想通过jquery修改节点,因为这可能会导致真正的意外行为.Raphael提供了您需要的所有功能,不需要使用jquery.
