Question

您好我正在尝试使用Raphael JS 2并且已经制作了一个很好的路径圈，但经过大量搜索无法弄清楚如何在这些路径上实现悬停事件来改变颜色......

Answer 1

这个小提琴改变了你设置悬停功能的方式。如果这不是你想要的，请解释。

Raphael的文档http://raphaeljs.com/reference.html#Element.hover表示你可以将hoverIn和hoverOut函数的上下文作为第三和第四个参数传递（在我的例子中，它们都是cItem）。这些是回调中this的值。

当然，您可以将hoverIn和hoverOut函数移动到适当的范围（for循环之外）

Answer 2

编辑：Marcelo的例子更具有可读性/可维护性，请使用他的。

你需要一个闭包来实现它：

(function (cItem) {
  cItem.hover(function(){
    cItem.attr({"stroke": "#E3E3E3"});
  },
  function(){
    cItem.attr({"stroke": "#000"});
});    
})(cItem)

http://jsfiddle.net/yxDap/

Answer 3

另一种处理此类问题的好方法，代码在这里：

（事件处理程序定义如下）

var hoverIn = function (item) {
    return function (event) {
        self.hoverFlag = true;
        self.hintElementObj = {};
        self._drawHint(paper, event, item);
    };
};

（事件处理程序像这样调用）

paper.rect(x, y, item.rectWidth, item.rectHeight, round).attr({
    fill: fill,
    "stroke-width": 0
}).hover(hoverIn(item), hoverOut(item));

事实上，这是一个可以在很多情况下使用的JS技巧。有了它，你可以做更多有趣的事情。

Raphael JS 2 Hover事件

3 个答案: