kinetic js canvas將事件監聽器添加到for循環中的多個點

Question

說我有以下代碼事件似乎只是每隔一次又一次地觸發以下兩個示例。

第一個例子這一偉大工程和事件觸發每次按預期在行動

for (var i = 0; i < items; i++) { 
      var rect = new Kinetic.Rect({ 
       x: 0, 
       y: 1+i, 
       width: 100, 
       height: 2, 
       fill: 'green' 
      }); 
      rect.on('mouseover', function(evt) { 
       $('#console').text(evt.shape.index); 
      }); 
      layer.add(rect); 
     } 

視圖http://jsfiddle.net/6aTNn/5/

這裏是我的問題將在事件旋轉值時，似乎並沒有被解僱正確。

for (var i = 0; i < items; i++) { 
      var rect = new Kinetic.Rect({ 
       x: stage.getWidth()/2, 
       y: stage.getHeight()/2, 
       width: 100, 
       height: 1, 
       fill: 'green' 
      }); 
      rect.on('mouseover', function(evt) { 
       console.log(evt.shape.index); 
       $('#console').text(evt.shape.index); 
      }); 
      rect.rotate(i * angularSpeed/items); 
      // add the shape to the layer 
      layer.add(rect); 
     } 

在行動http://jsfiddle.net/6aTNn/8/

任何幫助就這將是偉大的觀點一直在這幾個小時，不能找到一個可行的解決方案嗎？

Answer 1

節點過於「薄」且過於重疊，無法正常觸發事件。

嘗試增加每個節點的高度並添加更少的節點。
例如，將i++替換爲i += 3，並將height增加爲2。

for (var i = 0; i < 800; i += 3) { 
    var rect = new Kinetic.Rect({ 
     x: stage.getWidth()/2, 
     y: stage.getHeight()/2, 
     width: 100, 
     height: 2, 
     fill: 'green' 
    }); 
    // ... 
}