3

你好 Stackoverflow 社区

当我试图构建一个小游戏时，我遇到了一个问题。不知何故，当我尝试淡出多个形状时，分别是其中包含形状的组，某些形状不会淡出或浏览器出现堆栈溢出。

所以当我尝试了几个小时来解决这个问题时，我需要你的帮助。

这是我制作的小小提琴的链接：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：推荐谷歌浏览器，firefox容易崩溃。

感谢您的帮助。

编辑：对不起，我忘记了，您可以通过单击红色方块来激活脚本。

4

2 回答 2

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

让您感到困惑的是，该组被认为是 layer 的孩子（即使它尚未按函数调用的顺序添加，这对我来说是奇怪的行为）。因此，当您在每个函数中遍历 layer 的子级时，您正在尝试移动group --> group，这会在一个永无止境的循环中搞砸参考。

我在我的小提琴中记录了一堆东西，所以继续看看我上面谈到的一些奇怪的行为。

无论如何，如果您的回调要破坏 layer，那么将所有内容移动到函数中的新组有什么意义？该组正在弄乱您的代码，如果您只是要破坏该层，我看不出它的意义。

相反，您可以通过对图层本身进行补间来实现您想要的效果：

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

如果你必须坚持你原来的函数格式，那么你可以通过使用names来获取孩子：

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

在我的示例中，我使用了 name 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

更新

好的，所以我做了一个关于这个问题的基本例子layer.children

第二个JSFIDDLE

看起来这就是 layer 的孩子们的工作方式。这证明你必须区分形状和组，因为组将始终被视为图层的子级。

命名方法通过为所有形状提供一个不包括组的通用名称来区分图层之间的形状。

于 2013-08-05T15:14:37.217 回答
2

经过几次尝试以我的方式弯曲 projeqht 的功能后，我终于做到了！不知何故，当将组添加到图层时，集合形状会自行更新！如果我改用数组，它可以工作。

希望它可以帮助某人！

所以在这里我的解决方案就像一个魅力。

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

如果您还有其他问题，请不要介意与我联系。

于 2013-08-06T08:47:54.553 回答