Question

我想复制像http://tympanus.net/Tutorials/AnimatedSkillsDiagram/这样的内容。我在循环中以相同的方式附加事件。

for(var i = 0; i < data_array.length; i++){

var arc = new Kinetic.Shape({
// ..
});

var circle_outer = new Kinetic.Circle({
  // ..
});

layer.add(circle_outer);
layer.add(arc);

arc.on('mouseover', function(e) {
  // ..
});
arc.on('mouseout', function(evt) {
 // ..
});
}

stage.add(layer);

我已经取得http://jsfiddle.net/rohitrox/hnuf9/6/

我的问题是悬停效果仅适用于最内部的弧线，正如您可以在小提琴中看到的那样。

任何想法如何通过这个？而且我也觉得KineticJs表现得更慢。是吗？或者我做错了。

Answer 1

这个问题（我相信）与我之前遇到的变量范围（在JavaScript中）有关。我只是将你的代码移到For Loop外部作为一个函数，其中变量'i'现在是本地的，并且保留了用该函数调用定义的对象。

 function insideFor(i){
   var data_value = data_array[i].value;

$('#legends').append('<div><span style="background: '+data_array[i].color+';"></span>'+data_array[i].data+'</div>')

var endAngle = startAngle + value_to_angle(data_value);

var arc = new Kinetic.Shape({
  drawFunc: function(canvas) {
      var context = canvas.getContext('2d');
      context.beginPath();
      context.arc(x, y, this.getAttrs().radius, this.getAttrs().startAngle, this.getAttrs().endAngle, false);
      canvas.stroke(this);
  },
  fill: data_array[i].color,
  stroke: data_array[i].color,
  radius: radius,
  startAngle: startAngle*0.0174532925,
  endAngle: endAngle*0.0174532925,
  strokeWidth: 20
  });

startAngle = endAngle;

var circle_outer = new Kinetic.Shape({
  drawFunc: function(canvas) {
      var context = canvas.getContext('2d');
      context.beginPath();
      context.arc(x, y, this.getAttrs().radius, this.getAttrs().startAngle, this.getAttrs().endAngle, false);
      canvas.stroke(this);
  },
  fill: '#ddd',
  stroke: '#ddd',
  radius: radius,
  startAngle: 0,
  endAngle: 360*0.0174532925,
  strokeWidth: 20
});

layer.add(circle_outer);
layer.add(arc);

circle_outer.on('mouseover', function(e) {
  (new Kinetic.Tween({
  node: arc, 
  strokeWidth: 25,
  easing: Kinetic.Easings['ElasticEaseInOut']
  })).play();
});
circle_outer.on('mouseout', function(e) {
  (new Kinetic.Tween({
  node: arc, 
  strokeWidth: 20,
  easing: Kinetic.Easings['ElasticEaseInOut']
  })).play();
});

radius -= 30;
stage.add(layer);
}

  for(var i = 0; i < data_array.length; i++){
    insideFor(i);

  }

这是更新的小提琴 http://jsfiddle.net/hnuf9/7/

多个形状上的事件n KIneticJS

1 个答案: