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