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

时间：2014-04-07 11:01:12

标签： fabricjs

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

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 个答案:

答案 0 :(得分：48)

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

答案 1 :(得分：7)

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

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

here

答案 2 :(得分：5)

只需在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

答案 3 :(得分：1)

我刚修改了Balaji的代码现在有点好用了

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

答案 4 :(得分：1)

正如我需要的那样，这是我基于Balaji代码设置偏移的过度工作函数，因此对象只能在画布中部分显示。

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

答案 5 :(得分：0)

也只是稍微修改了Balaji和Surya T的代码，因此现在可以完全注意画布缩放设置。

   _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;
        }
    });
相关问题
最新问题