1

ドラッグ可能な 10 個の長方形を追加しました。それらを 1 つずつクリックすると、それらを削除できるようにしたいと考えています。現在、最初のもののみを削除しており、それ以上は削除されません。四角形 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);
}
4

1 に答える 1

1

各rectを一度に1つずつ削除できるようにするために、最初に新しいレイヤーをforループ内に移動しました。また、各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);
}
于 2013-03-07T12:26:05.317 に答える