多个形状上的事件n KIneticJS

我想复制类似的东西。我以同样的方式在循环中附加事件

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

for（变量i=0；i

我已经做到了

我的问题是悬停效果只作用于最里面的弧线，正如你在小提琴上看到的那样

你知道怎么度过这个难关吗？我也觉得KineticJs的表现比较慢。它是？或者我做得不对。

这个问题（我相信）与我以前遇到的变量作用域（JavaScript）有关。我只是将您的代码作为一个函数移动到For循环的外部，其中变量“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);

  }

函数内部（i）{
var data\u value=data\u数组[i]。value；
$（“#图例”）.append（“”+data_数组[i]。data+“”）
var endAngle=startAngle+值到角度（数据值）；
var arc=新的动力学形状({
drawFunc:函数（画布）{
var context=canvas.getContext（'2d'）；
context.beginPath（）；
弧（x，y，this.getAttrs（）.radius，this.getAttrs（）.startAngle，this.getAttrs（）.endAngle，false）；
画布。笔划（本）；
},
填充：数据_数组[i]。颜色，
笔划：数据_数组[i]。颜色，
半径：半径，
startAngle:startAngle*0.0174532925，
端角：端角*0.0174532925，
冲程宽度：20
});
startAngle=端角；
var circle_outer=新的动力学形状({
drawFunc:函数（画布）{
var context=canvas.getContext（'2d'）；
context.beginPath（）；
弧（x，y，this.getAttrs（）.radius，this.getAttrs（）.startAngle，this.getAttrs（）.endAngle，false）；
画布。笔划（本）；
},
填写：“#ddd”，
笔划：“#ddd”，
半径：半径，
startAngle:0，
端角：360*0.0174532925，
冲程宽度：20
});
层。添加（圈外）；
层。添加（弧）；
圆_外开（'mouseover'，函数（e）{
（新动能，吐温({
节点：圆弧，
冲程宽度：25，
放松：动态。放松['ElasticEaseInOut']
})).play（）；
});
外圆开（'mouseout'，函数（e）{
（新动能，吐温({
节点：圆弧，
冲程宽度：20，
放松：动态。放松['ElasticEaseInOut']
})).play（）；
});
半径-=30；
阶段。添加（层）；
}
对于（变量i=0；i

这是最新的小提琴

：）当我第一次被它缠住的时候，它让我很恼火