32

I am trying to limit the moving object within the canvas but i am getting some difficulty in moving the object in the limit area on top and left side and when i scale the object bigger then also i am not able to limit the moving object on left and top sides 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)
  }
});

6 Answers 6

64
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);
  }
});
3
  • 1
    Best solution I've seen. Sep 21, 2016 at 12:14
  • If you need to allow the objects to be moved partly outside the canvas bounding, see my enhanced function below Jan 24, 2018 at 15:42
  • Nice! It it possible to override the fabric function so this would affect all fabric canvasses? May 4, 2019 at 8:13
7

Here you can find solution:-

var canvas = window._canvas = new fabric.Canvas('c');
canvas.selection = false;

fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'red',
    cornerSize: 12,
    padding: 0
});
text = new fabric.Text('Sample',{
    top: canvas.height/2,
    left: canvas.width/2,
    fill: '#000000'
});

canvas.add(text);
canvas.setActiveObject(text);

canvas.observe('object:scaling', function (e) {
    var obj = e.target;
  if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){
    obj.setScaleY(obj.originalState.scaleY);
    obj.setScaleX(obj.originalState.scaleX);        
  }
  obj.setCoords();
  if(obj.getBoundingRect().top - (obj.cornerSize / 2) < 0 || 
     obj.getBoundingRect().left -  (obj.cornerSize / 2) < 0) {
    obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize / 2));
    obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize / 2));    
  }
  if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize  > obj.canvas.width) {

    obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize / 2);
    obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);    
  }
});

canvas.observe('object:moving', function (e) {
    var obj = e.target;
  if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){
    obj.setScaleY(obj.originalState.scaleY);
    obj.setScaleX(obj.originalState.scaleX);        
  }
  obj.setCoords();
  if(obj.getBoundingRect().top - (obj.cornerSize / 2) < 0 || 
     obj.getBoundingRect().left -  (obj.cornerSize / 2) < 0) {
    obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize / 2));
    obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize / 2));    
  }
  if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize  > obj.canvas.width) {

    obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize / 2);
    obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);    
  }
});

http://jsfiddle.net/jw1827fm/1/

1
  • 2
    The scale did not work for me with version 1.7.11. First you need to build the fabric canvas with {stateful : true,}. second I had to use _stateProperties instead of originalState. Third you need to obj.saveState(); after these changes.
    – Exlord
    May 18, 2017 at 10:31
7

Just add the below code in your js file and change the value of scale X(left) and Y(top) according to your canvas height and width.

// canvas moving limit 

canvas.observe("object:moving", function(e){
      var obj = e.target;
         // if object is too big ignore

        var halfw = obj.currentWidth/2;
        var halfh = obj.currentHeight/2;
        var bounds = {tl: {x: halfw, y:halfh},
            br: {x: obj.canvas.width , y: obj.canvas.height }
        };

        // top-left  corner



            // alert("text");
        if(obj.top < bounds.tl.y || obj.left < bounds.tl.x){
            obj.top = Math.max(obj.top, '10'  );
            obj.left = Math.max(obj.left , '50' ) 
        }


        // bot-right corner
        if(obj.top > bounds.br.y || obj.left > bounds.br.x ){
            obj.top = Math.min(obj.top, '360'  );  
            obj.left = Math.min(obj.left, '470' )  
        }

});
// end canvas moving limit
4
  • Is there anyway to force objects to go outside canvas ? Dec 3, 2015 at 9:07
  • ask question on stack Dec 3, 2015 at 13:52
  • It's simply yes or no question, if yes then how ? No need for extra question. Stack has very egoistic community moderator, they close the question with negative, If I simply ask ques. Dec 9, 2015 at 13:13
  • Slightly dated, but after I made the needed changes, it worked. Observe is no longer a function, and height and width are now attributes, not methods you have to get.
    – Shmack
    Jan 4 at 19:44
1

I just Modified Balaji's code a little bit works better now

canvas.on('object:moving', function (e) {
    var obj = e.target;

     // if object is too big ignore
    if(obj.getScaledHeight() > obj.canvas.height || obj.getScaledWidth() > 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);
    }});
1

As i needed this, here is my overworked function based on Balaji's code to set a offset, so objects can be only partly showed within the canvas.

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

      // set offset for moving out the canvas (20 % of object persists in canvas)
      var offsetWidth = obj.getBoundingRect().width * 0.8;
      var offsetHeight = obj.getBoundingRect().height * 0.8;

      obj.setCoords();        

      // top-left  corner
      if(obj.getBoundingRect().top < -offsetHeight || obj.getBoundingRect().left < -offsetWidth){
          obj.top = Math.max(obj.top, obj.top-(obj.getBoundingRect().top+offsetHeight));
          obj.left = Math.max(obj.left, obj.left-(obj.getBoundingRect().left+offsetWidth));
      }
      // bot-right corner
      if(obj.getBoundingRect().top+obj.getBoundingRect().height  > obj.canvas.height + offsetHeight || obj.getBoundingRect().left+obj.getBoundingRect().width  > obj.canvas.width + offsetWidth){
          obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top+offsetHeight);
          obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left+offsetWidth);
      }
});      
0

Just modified a bit too the code of Balaji and Surya T so it take care fully now of canvas zoom setting.

   _self.layer.on('object:moving', function (e) {
        var obj = e.target;

        obj.setCoords();
        var curZoom = obj.canvas.getZoom();

        //
        // if object is too big ignore
        if(obj.getScaledHeight() > obj.canvas.height || obj.getScaledWidth() > obj.canvas.width){
            return;
        }

        // top-left  corner
        if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
            obj.top = Math.max(obj.top*curZoom, obj.top*curZoom-obj.getBoundingRect().top)/curZoom;
            obj.left = Math.max(obj.left*curZoom, obj.left*curZoom-obj.getBoundingRect().left)/curZoom;
        }
        // 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*curZoom, obj.canvas.height-obj.getBoundingRect().height+obj.top*curZoom-obj.getBoundingRect().top)/curZoom;
            obj.left = Math.min(obj.left*curZoom, obj.canvas.width-obj.getBoundingRect().width+obj.left*curZoom-obj.getBoundingRect().left)/curZoom;
        }
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.