Kineticjs删除多个形状

Question

我已经添加了10个可拖动的矩形，我希望能够逐个将它们删除。现在它只是删除第一个，然后它不会再删除。是否有添加一个点击事件到矩形ID？

http://jsfiddle.net/dmYbA/

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 400 
    }); 

    var layer = new Kinetic.Layer(); 

for (var i = 0; i< 10; i++) { 

    var rect = new Kinetic.Rect({ 
    x: 239 + (i *3), 
    y: 75 + (i * 3), 
    width: 100, 
    height: 50, 
    fill: 'blue', 
    stroke: 'black', 
    strokeWidth: 4, 
     draggable: true, 
     id: i 
    }); 

rect.on('click', function() { 
    rect.hide(); 

}); 

    // add the shape to the layer 
    layer.add(rect); 

    // add the layer to the stage 
    stage.add(layer); 
} 

Answer 1

为了能够在一段时间我第一移动的新层的内部for循环删除的每个矩形之一。我还添加了每个rect添加到的组。然后在rect.on中将其设置为this.remove（）而不是rect.remove（）。

http://jsfiddle.net/DP53S/

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 400 
    }); 



for (var i = 0; i< 10; i++) { 
    var group = new Kinetic.Group({ 
    draggable: true 
}); 
    var layer = new Kinetic.Layer(); 
    var rect = new Kinetic.Rect({ 
    x: 239 + (i *3), 
    y: 75 + (i * 3), 
    width: 100, 
    height: 50, 
    fill: 'blue', 
    stroke: 'black', 
    strokeWidth: 4 
    }); 

rect.on('click', function() { 
    this.remove(); 
    layer.draw(); 

}); 

    // add the shape to the layer 
    group.add(rect) 
    layer.add(group); 

    // add the layer to the stage 
    stage.add(layer); 
}