多種形狀fadout與動力學JS產生一個堆棧溢出

Question

你好社區＃1

當我想建立一個小遊戲，我來到了一個問題。 不知何故，當我嘗試淡化多個形狀，分別具有其中的形狀，一些形狀不會淡出或瀏覽器得到堆棧溢出。

所以當我嘗試了幾個小時來解決這個問題我需要你的幫助。

繼承人的鏈接，一點小提琴我做：http://jsfiddle.net/hnBPT/

正如你可以看到孤單的功能newFadeShapesOut（），它需要應該淡出，也是節點層的節點。 它將節點移動到一個組中，並淡出組。不知何故，有時候，一個或多個形狀不會淡出或發生致命錯誤。

功能的淡出：

function newFadeShapesOut(shapes, layer, callback, speed){ 
    if(typeof(speed) == 'undefined'){ 
     speed = 1; 
    } 
    var g = new Kinetic.Group(); 
    console.log(layer.getChildren().length); 
    console.log(shapes.length); 
    layer.add(g); 
    shapes.each(function(shape){ 
     shape.moveTo(g); 
    }); 
    console.log(layer.getChildren().length); 
    console.log(shapes.length); 
    var tween = new Kinetic.Tween({ 
     node: g, 
     opacity: 0, 
     duration: speed, 
     onFinish: function(){ 
      if(typeof(callback) != 'undefined'){ 
       callback(); 
       tween.destroy(); 
      } 
     } 
    }).play(); 
} 

PS：谷歌Chrome是建議，火狐趨於崩潰。

謝謝你的幫助。

編輯：對不起，我忘了這一點，你可以通過點擊紅色方塊激活腳本。

Answer 1

經過多次嘗試彎曲項目的功能到我的方式我終於做到了！ 不知何故，集合形狀剛剛更新自己當組添加到圖層！ 如果我使用數組，它可以工作。

希望它可以幫助別人！

所以這裏我的解決方案就像一個魅力。

function fadeShapesOut(shapes, callback, speed){ 
    layer = shapes[0].getLayer(); 
    if(typeof(speed) == 'undefined'){ 
     speed = 1; 
    } 
    var g = new Kinetic.Group(); 
    layer.add(g); 
    for(i in shapes){ 
     shapes[i].moveTo(g); 
    } 
    var tween = new Kinetic.Tween({ 
     node: g, 
     opacity: 0, 
     duration: speed, 
     onFinish: function(){ 
      if(typeof(callback) != 'undefined'){ 
       callback(); 
      } 
      tween.destroy(); 
     } 
    }).play(); 
} 

如果您還有其他問題，請不要介意與我聯繫。

Answer 2

這裏有一些奇怪的行爲。看看我的意見，我試圖重寫你的函數：

function fadeShapesOut(layer, callback, speed) { 
     var children = layer.children; 
     //The layer here already shows some children have moved. 
     //2 children remain, 1 text and 1 rect. 
     console.log("LAYER"); 
     console.log(layer); 
     //Again, children shows that there are only 2 children of layer at this point: Test 2 and Button Rect 
     console.log('CHILDREN'); 
     console.log(children); 
     if(typeof(speed) == 'undefined'){ 
      speed = 1; 
     } 
     var group = new Kinetic.Group(); 
     layer.add(group); 
     children.each(function(child) { 
      console.log("CHILD"); 
      console.log(child); //This spits out Test 1, Test 3 and the newly added Group. (Strange order??? 
      child.moveTo(group); 
     }); 
     //Since group is already added to the layer, you're all of layer's children to group, including group itself. Which is causing a never ending loop of references to group including itself - causing the stack overflow. 
     var tween = new Kinetic.Tween({ 
      node: group, 
      opacity: 0, 
      duration: speed, 
      onFinish: function(){ 
       if(typeof(callback) != 'undefined'){ 
        callback(); 
        tween.destroy(); 
       } 
      } 
     }).play(); 
    } 

什麼搞亂您的是，組被認爲是孩子層（儘管它尚未加入的按照函數調用的順序，這對我來說很奇怪）。因此，當你循環遍歷中每個函數的子圖層時，試圖移動組 - >組，這會在永無止境的循環中將引用鎖定。

我在我的小提琴中記錄了一堆東西，所以繼續看看我在上面討論的一些奇怪的行爲。

不管怎麼說，如果你的回調是破壞層，什麼是移動一切到一個新的組在功能？該團隊正在搞亂你的代碼，如果你只是要破壞這個層，我就沒有看到它的重點。

相反，你可以達到的效果，你想只補間層本身：

function fadeLayer(layer, callback, speed) { 
    var tween = new Kinetic.Tween({ 
      node: layer, 
      opacity: 0, 
      duration: 2, 
      onFinish: function(){ 
       layer.destroy(); 
       tween.destroy(); 
      } 
     }).play(); 
} 

---

---

---

如果你必須使用你原來的功能格式棒，那麼你就可以抓住兒童使用名稱：

newsobj[n] = new Kinetic.Text({ 
     nid: n, 
     x: 140, 
     y: ((n == 0) ? 294.5 : 304.5), 
     text: news[n], 
     fill: 'white', 
     fontFamily: 'Corbel W01 Regular', 
     fontSize: 11.26, 
     name: 'fadeThisAway' 
    }); 

    button = new Kinetic.Rect({ 
     x: 10, 
     y: 10, 
     width: 100, 
     height: 100, 
     fill: 'red', 
     name: 'fadeThisAway' 
    }); 

在我的例子中，我用名稱fadeThisAway。然後，使用舊的功能：

function newFadeShapesOut(layer, callback, speed){ 
     var shapes = layer.get('.fadeThisAway'); 
     if(typeof(speed) == 'undefined'){ 
      speed = 1; 
     } 
     var g = new Kinetic.Group(); 
     console.log(layer.getChildren().length); 
     console.log(shapes.length); 
     layer.add(g); 
     shapes.each(function(shape){ 
      shape.moveTo(g); 
     }); 
     console.log(layer.getChildren().length); 
     console.log(shapes.length); 
     var tween = new Kinetic.Tween({ 
      node: g, 
      opacity: 0, 
      duration: speed, 
      onFinish: function(){ 
       if(typeof(callback) != 'undefined'){ 
        callback(); 
        tween.destroy(); 
       } 
      } 
     }).play(); 
    } 

不是傳遞shapes通過功能，只需撥打

var shapes = layer.get('.fadeThisAway');

在函數的開頭（你傳遞層通過功能已經反正）抓住名爲fadeThisAway的孩子。 （注：這工作，因爲組沒有命名fadeThisAway）

工作實例和評論中：JSFIDDLE

---

UPDATE

好了，所以我提出這個問題的一個基本的例子與layer.children

2nd JSFIDDLE

看起來這就是圖層的孩子們的工作方式。這證明你一定要區分形狀和組，因爲這個組將永遠被認爲是圖層的一個孩子。

命名方法通過爲所有形狀提供一個不包含組的組的通用名稱來區分圖層之間的形狀。