多種形狀的事件n KIneticJS

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循環外部，作爲一個函數，其中變量'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/