Рафаэль JS 2 Hover событие

Question

Привет. В настоящее время я экспериментирую с Raphael JS 2 и создал хороший круг путей, но после долгих поисков не могу понять, как реализовать событие наведения на этих путях для изменения цвета ...

http://jsfiddle.net/goosefat/HYmd2/

Answer 1

Эта скрипка немного меняется в зависимости от того, как вы устанавливаете функции наведения. Если это не то, что вы хотите, пожалуйста, объясните.

http://jsfiddle.net/vzkxC/1/

Документация Рафаэля http://raphaeljs.com/reference.html#Element.hover говорит, что вы можете передать контекст функций hoverIn и hoverOut в качестве третьего и четвертого параметров (в моем примере они оба cItem). Это значения this внутри обратных вызовов.

Конечно, вы можете переместить функции hoverIn и hoverOut в соответствующую область (из цикла for)

Answer 2

Еще один хороший метод для вас такого рода проблем , код здесь:

(обработчик событий определен так)

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, который вы можете использовать во многих ситуациях. С его помощью вы могли бы сделать еще много интересного.

Answer 3

Редактировать : пример Марсело более удобен для чтения / сопровождения, используйте его.

Вам нужно закрытие, чтобы добиться этого:

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

http://jsfiddle.net/yxDap/