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);

  });

但悬停功能仅在LAST创建的对象上运行！能告诉我如何解决这个问题吗？

Answer 1

当你打电话给#g; circle.glow（）＆＃39;时，问题是你引用了哪个圈子，因为你有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);

  });
}

悬停功能不能在数组中的Rapael.js对象上工作

2 个答案: