javascriptcanvaskineticjs

kinetic js : dragBoundFunc property does not work properly


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.


Solution

  • 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/