悬停功能不适用于数组中的 Rapael.js 对象

Question

使用 Raphael.js 2.1.0 我正在尝试使用以下代码从坐标数组在 Canvas 上创建圆形对象：

var map = Raphael('canvas', 500, 500);
var coords = [ [150,50], [20,85], [350,95] ];
var circle;
for(var i = 0; i < coords.length; i++){
  circle = map.circle(coords[i][0], coords[i][1], 20);
  circle.toFront();
  circle.attr({
      fill: '#98ED00',
      translation: "4,4",
      stroke: '#FFF',
      'stroke-width': 4,
      opacity: 1,
  });
}

  circle.hover(
  function () {
      circle.animate({
          fill: 'red',
          opacity: 1,
          map: 30,
              'stroke-width': 4
      }, 300);
  }, function () {
      circle.animate({
           fill: '#98ED00',
          opacity: 1,
              'stroke-width': 4,
          map: 20
      }, 300);

  });

但悬停功能仅在最后创建的对象上起作用！我该如何解决这个问题？

Answer 1

问题是当你调用 'circle.glow()' 时你引用的是哪个圆，因为你有 3 个？

circle var 每次都会被覆盖，因此处理程序只是附加到最后一个。

要解决这个问题，有几种不同的方法。您可以为圆圈创建一个数组并为每个圆圈添加一个悬停处理程序。或者您可以创建一个闭包，如下例所示。这取决于您以后是否需要对其进行任何可能影响解决方案的操作...

var map = Raphael('canvas', 500, 500);
var coords = [ [150,50], [20,85], [350,95] ];

for(var i = 0; i < coords.length; i++){
    (function() {
      var circle;
      circle = map.circle(coords[i][0], coords[i][1], 20);
      circle.toFront();
      circle.attr({
         fill: '#98ED00',
          translation: "4,4",
          stroke: '#FFF',
         'stroke-width': 4,
         opacity: 1,
     });
     circle.hover(
       function () {
         circle.animate({
              fill: 'red',
              opacity: 1,
              map: 30,
              'stroke-width': 4
          }, 300)
         }, function () {
           circle.animate({
               fill: '#98ED00',
               opacity: 1,
              'stroke-width': 4,
              map: 20
          }, 300)
         }    );
    })();
};

http://jsfiddle.net/HVh9E/2/

Answer 2

也许悬停事件绑定应该在 for 循环内。这样，每个对象在创建之后都会被绑定......然后再移动到下一个。

var map = Raphael('canvas', 500, 500);
var coords = [ [150,50], [20,85], [350,95] ];
var circle;
for(var i = 0; i < coords.length; i++){
  circle = map.circle(coords[i][0], coords[i][1], 20);
  circle.toFront();
  circle.attr({
      fill: '#98ED00',
      translation: "4,4",
      stroke: '#FFF',
      'stroke-width': 4,
      opacity: 1,
  });

  circle.hover(
  function () {
      circle.animate({
          fill: 'red',
          opacity: 1,
          map: 30,
              'stroke-width': 4
      }, 300);
  }, function () {
      circle.animate({
           fill: '#98ED00',
          opacity: 1,
              'stroke-width': 4,
          map: 20
      }, 300);

  });
}