Question

我试图通过悬停事件将事件链接到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 ...我应该单独声明每一个吗？

这是a fiddle

Answer 1

发生这种情况是因为您将 hoverTitle 定义为全局变量，所以当您尝试在回调中使用它时，您总是使用最后一个。

解决方案是将hoverTitle定义为每个六边形的局部属性，例如：

hexa.hoverTitle = paper.text(hx + rx * 70, hy + ry * 70, "foo " + i);

然后在回调函数中使用此属性进行操作：

this.hoverTitle.show();
this.hoverTitle.animate({opacity:1}, 200, '<>');

Fiddle

javascript raphael.js多个对象和事件

1 个答案: