Move object within canvas boundary limit

Sanjay Nakate picture Sanjay Nakate · Apr 7, 2014 · Viewed 19.9k times · Source

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

Answer

Balaji picture Balaji · Jun 16, 2014
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);
  }
});