检测形状与Kinetic.Group之间的碰撞

Question

我要移动的形状是一个width:40和height:4的矩形，这使检测变得更加困难。 当width = height时比较容易（您可以看到大矩形之间的碰撞）。

就我而言，我需要检测此矩形与包含另一个矩形的组之间的碰撞，然后将小的矩形添加到该组中。 这是一个小提琴，可以了解更多信息： http : //jsfiddle.net/4Y87X/6/

当在组的底部和右侧检测到冲突时，它的效果很好，但是无法很好地“检测到”左侧和顶部边界。

Answer 1

好的，既然您已经重构了代码以预先创建window.clone，则可以使用此dragend处理程序将克隆分配给组或将克隆重新放置在原始window元素的顶部。

演示： http : //jsfiddle.net/m1erickson/p4bYB/

clone.on("dragend",function(){
    var pos=stage.getPointerPosition();
    var x=parseInt(pos.x);
    var y=parseInt(pos.y);
    var gPos=group.position();
    var gSize=group.getSize();
    if(x>gPos.x && x<gPos.x+gSize.width && y>gPos.y && y<gPos.y+gSize.height){
        this.moveTo(group);
        thisPos=this.position();
        this.position({x:thisPos.x-gPos.x,y:thisPos.y-gPos.y});
    }else{
        this.moveTo(layer);
        this.position(window.position());
    }
    layer.draw();
});

[根据其他评论，放置后将克隆的位置重新放置到组的左上角]

如果要在添加克隆时将克隆放置在组的左上方，请执行以下操作：

this.moveTo(group);
this.position(0,0);