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.
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();
});