破壞KonvaJS補間結束的多個形狀

所以我有一個循環生成，放置和補間20個矩形。但是，代碼只會銷燬最後生成的矩形。是否有一種（理想的簡單方法）確保.destroy（）適用於每個矩形而不是最後一個矩形？破壞KonvaJS補間結束的多個形狀

$("#combat").click(function() { 

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

     var rect = new Konva.Rect({ 
      x: -500, 
      y: stage.height()*Math.random(), 
      width: 480, 
      height: 20, 
      fill: 'green', 
      stroke: 'black', 
      strokeWidth: 3 
     }); 

     layer.add(rect); 

     tween = new Konva.Tween({ 
      node: rect, 
      duration: 1, 
      x: 500, 
      onFinish: function() { 
       rect.destroy() 
      } 
     }).play(); 

    } 

});

來源

2015-07-10 user3317592

可以使用Group對象是：

編輯：

$("#combat").click(function() { 

    var rectGroup = new Konva.Group(); 

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

     var rect = new Konva.Rect({ 
      x: -500, 
      y: stage.height()*Math.random(), 
      width: 480, 
      height: 20, 
      fill: 'green', 
      stroke: 'black', 
      strokeWidth: 3 
     }); 

     rectGroup.add(rect);   
     layer.add(rectGroup); 

     tween = new Konva.Tween({ 
      node: rect, 
      duration: 1, 
      x: 500, 
      onFinish: function() { 
       rectGroup.destroy() 
      } 
     }).play(); 

    } 

});

來源

2015-07-10 19:13:01

可悲的是，這是行不通的。仍然只有最後一個矩形被銷燬。難道是因爲我們正在重新定義每個循環的變量'tween'，它會覆蓋之前定義的onFinish函數？ – user3317592

對不起，這是我的錯誤，Group對象應該在循環之前初始化。代碼已更新。 –

這工作（巨大的感謝！），但有沒有辦法確保它只銷毀矩形？這是我最終需要做的，因爲我在我的補間「duration：2 + Math.random（）* 4」中，並且從我能告訴腳本在最後一個矩形補間完成後破壞整個組。 – user3317592

 var tween = new Konva.Tween({ 
      node: pentagon, 
      duration: 1, 
      x: 500, 
      onFinish: function() { 
       // this will be tween instance 
       // this.node will be rectangle 
       console.log(this.node); 
      } 
     }).play();

來源

2015-08-06 10:34:15 lavrton

破壞KonvaJS補間結束的多個形狀

回答

相關問題