Detect collision between shape and Kinetic.Group

Question

The shape that I'm moving is a rectangle with width:40 and height:4, and this is what made the detection harder. It's easier when width = height (you can see the collision between the big rectangles).

In my case, I need to detect collision between this rectangle, and a group containing another rectangle, then add the small one to the group. Here's a fiddle to understand more: http://jsfiddle.net/4Y87X/6/

It works great when collision is detected on bottom, and on the right of the group, but the left and top borders are not well "detected".

You might simplify your code by creating a window.clone ahead of time and placing it directly over the original window. — markE
Right, I edited it, but how do I do to get the correct behavior as described? — Sahar Ch.

markE markE · Accepted Answer · 2014-04-22T03:49:29

Ok, now that you've refactored your code to pre-create your window.clone you can use this dragend handler to either assign the clone to a group or to reposition the clone back on top of the original window element.

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

[ Per additional comment, reposition dropped clone to group's top-left after dropping ]

If you want the clone to be positioned to top-left of group when added just do this:

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

Detect collision between shape and Kinetic.Group

1 Answers