Kineticjs 여러 모양 제거

Question

나는 드래그 가능한 10 개의 직사각형을 추가했으며 하나씩 클릭하면 제거 할 수 있기를 원합니다. 지금은 처음 것만 제거하면 더 이상 제거되지 않습니다. 사각형 이벤트에 클릭 이벤트를 추가 할 수 있습니까?

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

http://jsfiddle.net/dmYbA/

는 내가 처음 루프의 내부에 새 레이어를 이동 한 번에 각 RECT 하나를 삭제할 수합니다. 각 rect에 추가 된 그룹도 추가했습니다. 그런 다음 rect.on 내부에서 rect.remove() 대신 this.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); 
}