Question

我正在使用javascript Kineticjs框架为孩子们创建游戏。更具体地说，我正在使用矩形和组。我有以下功能，它会在碰撞时组合两个立方体（通过在同一组中添加它们）。我想要实现的是组中的双击事件，它会破坏它，如下面的代码所示。为此，我使用this.destroy（）函数似乎工作正常（从官方网站上的这个jsfiddle示例中可以看到并稍作修改）。

/*
 A function that takes two cubes and add them in a group if the collide
*/
function combineCubes(movingCube,staticCube){
 var movingCube_x = movingCube.getAbsolutePosition().x;
 var movingCube_y = movingCube.getAbsolutePosition().y;
 var staticCube_x = staticCube.getAbsolutePosition().x;
 var staticCube_y = staticCube.getAbsolutePosition().y;

var tempGroup = new Kinetic.Group({
    name:'group',
    draggable : true,
    dragOnTop: false
});

if ( collisionHappens(movingCube, staticCube) ) {
    movingCube.x(staticCube_x);
    movingCube.y(staticCube_y - staticCube.height());
    tempGroup.add(staticCube);
    tempGroup.add(movingCube);
    movingCube.setDraggable(false);
    staticCube.setDraggable(false);
    layer.add(tempGroup);
}

tempGroup.on('dblclick', function() {
        this.destroy();
    }   
 });
}

使用此代码时会发生什么事情，一切都停止响应（我猜可能会有无限循环）。

我在下面添加了一些示例代码，其中显示了我如何调用combineCubes（）函数。

/*
I am calling the combineCubes function inside another function.
*/

function createCube(tempX, tempY) {
  var tempCube = new Kinetic.Rect({
     x : tempX,
     y : tempY
  };
/*
At dragend of each cube I am checking if it is colliding with other cubes
*/
tempCube.on('dragend', function() {
    if(collisionHappens){
        combineCubes(this, anotherCube);
    }
 }
}

即使我对Javascript不是很熟悉，我认为这主要是一个Javascript问题而不是KineticJS，因为我觉得函数内部变量的范围有问题。然而，即使我尝试使用不同的技术，我也没有设法使这项工作成功。有没有人有任何想法？

Answer 1

您是否尝试使用.hide()或.remove()？我使用了第二种方法并且工作正常，我不了解.destroy()。

tempGroup.on("dblclick dbltap", function(e){
     this.remove(); //or .hide()
     layer.draw(this);
     stage.draw(); 
});

如何在Kineticjs中正确使用this.destroy（）？

1 个答案: