[英]javascript raphael.js multiple objects and events
我试图通过悬停事件将事件链接到raphael.js对象,但是它不起作用。 这是我的代码:
var paper = Raphael('menu', 400, 400);
for(var i = 0; i < 6; i++) {
var x = 200,
y = 200;
var rx = Math.sin(i / 6 * 2 * Math.PI),
ry = Math.cos(i / 6 * 2 * Math.PI);
var hx = x + rx * 100,
hy = y + ry * 100;
var hexa = polygon(hx, hy, 6, 50);
hexa.attr("fill", "rgb(212, 212, 212)");
hexa.attr("stroke-width", 0);
var hoverTitle = paper.text(hx + rx * 70, hy + ry * 70, "foo " + i);
var hoverIn = function() {
this.animate({fill: "rgb(247,245,240)"}, 300, '<>');
hoverTitle.show();
hoverTitle.animate({opacity:1}, 200, '<>');
}
var hoverOut = function() {
this.animate({fill: "rgb(212, 212, 212)"}, 300, '<>');
hoverTitle.animate({opacity:0}, 200, '<>');
hoverTitle.hide();
}
hexa.hover(hoverIn, hoverOut, hexa, hexa);
}
function polygon(x, y, N, side) {
var path = "", n, temp_x, temp_y, angle;
for(n = 0; n <= N; n++) {
angle = n / N * 2 * Math.PI;
temp_x = x + Math.cos(angle) * side;
temp_y = y + Math.sin(angle) * side;
path += (n === 0 ? "M" : "L") + temp_x + "," + temp_y;
}
return paper.path(path);
}
我希望每个六边形在悬停时都显示为foo,但我不明白为什么它总是引用最后一个foo ...我应该分别声明每个吗?
这是一个小提琴
发生这种情况是因为您将hoverTitle定义为全局变量,所以当您尝试在回调中对其进行操作时,始终使用最后一个。
解决方案是将hoverTitle定义为每个六边形的局部属性,例如:
hexa.hoverTitle = paper.text(hx + rx * 70, hy + ry * 70, "foo " + i);
然后在回调中使用此属性进行操作:
this.hoverTitle.show();
this.hoverTitle.animate({opacity:1}, 200, '<>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.