2

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 のパフォーマンスが遅いと感じています。それは...ですか？または私は間違った方法でそれをやっています。

4

1 に答える 1

1

この問題 (私が信じている) は、以前に直面した (JavaScript での) 変数のスコープに関係しています。変数 'i' がローカルになり、その関数呼び出しで定義されたオブジェクトにとどまる関数として、For ループ内のコードを外に移動しただけです。

 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/

于 2013-07-18T11:53:51.667 に答える