kinetic js : dragBoundFunc property does not work properly

Question

I have a disturbing issue with kinetic js using dragBoundFunc.

I have dragBoundFunc defined on selector group, and it works perfectly not allowing the group overflow on the green rectangle. The erroneous case is follows:

1 - drag an anchor to resize selector rectangle, try to drag the anchor outside green rectangle. It will seem not moving outside bounds.

2 - now move selector rectangle to the edges in order to check bounds. You'll see that as if the green rectangle's position is somehow shifted from its original position.

How can I solve this strange behaviour? Any ideas?

Here is the fiddle.

score 0 · Accepted Answer · answered Nov 12 '13 at 11:15

Because rect and anchors is placed relative to group, you shoud move them after drag. I think best way to keep left top anchor and rectangle coord as {0, 0} in group.

group.on("dragend",function(){
    var rect = group.get('#rectangle')[0];
    var pos = rect.getPosition();
    var dx = pos.x;
    var dy = pos.y;
    group.children.each(function(child){
        child.move(-dx, -dy);
    });
    group.setPosition({
        x : pos.x + group.getPosition().x,
        y : pos.y + group.getPosition().y
    });
    layer.draw();
});

http://jsfiddle.net/lavrton/TfgAV/1/

kinetic js : dragBoundFunc property does not work properly

1 Answers1