在画布边界限制内移动对象

Question

我试图限制画布内的移动物体,但我在顶部和左侧移动具有限制区域的物体时遇到一些困难,当我缩放具有大尺寸的物体时,我也无法限制移动物体画布的左侧和顶侧

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 1

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

Answer 2

在这里你可以找到解决方案: -

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/

Answer 3

只需在js文件中添加以下代码,然后根据画布的高度和宽度更改比例X(左)和Y(顶部)的值.

// 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