I have two Objects on my canvas. The smaller one is on top of the larger one. I want to stop the user from resizing the bigger object to a smaller size than the smaller object.
For this I hooked into the bigger objects scaling event:
This example only implements it for the left side of the object.
function stageIntersectsWithObject() {
var stageLeft = el.getBoundingRect(true).left;
var objLeft = rect1.getBoundingRect(true).left
el.setCoords();
if(stageLeft > objLeft){
el.set('left', objLeft);
el.set('scaleX', this.lastScaleX);
} else {
this.lastScaleX = el.scaleX;
}
}
As soon as the left sides meet the width of the bigger object changes as well. I limited this with behavior by saving the scaleX value but it's still not working smoothly.
Please look at this fiddle: http://jsfiddle.net/zc3ufbha/1/
Click the black object and change it's size from the left to the right until it hits the smaller green object. You will see that the black object width changes when the left side stops.
How do I best prevent that? Thanks
