这里发生了一些奇怪的行为。当我试图重写你的函数时,看看我的评论:
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 的孩子们的工作方式。这证明你必须区分形状和组,因为组将始终被视为图层的子级。
命名方法通过为所有形状提供一个不包括组的通用名称来区分图层之间的形状。