I am trying to limit the moving object within the canvas but i am getting some difficulty to moving object with limit area on top and left side and when i scale the object with big size that time also i am not able to limit the moving object on left and top side of the canvas
canvas.observe("object:moving", function(e){
var obj = e.target;
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
var halfw = obj.currentWidth/2;
var halfh = obj.currentHeight/2;
var bounds = {tl: {x: halfw, y:halfh},
br: {x: obj.canvas.width-halfw, y: obj.canvas.height-halfh}
};
// top-left corner
if(obj.top < bounds.tl.y || obj.left < bounds.tl.x){
obj.top = Math.max(obj.top, bounds.tl.y);
obj.left = Math.max(obj.left, bounds.tl.x )
}
// bot-right corner
if(obj.top > bounds.br.y || obj.left > bounds.br.x){
obj.top = Math.min(obj.top, bounds.br.y);
obj.left = Math.min(obj.left, bounds.br.x)
}
});
canvas.on('object:moving', function (e) {
var obj = e.target;
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
}
// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
}
});