Spostare l'oggetto entro il limite del limite di tela

Question

Sto provando a limitare l'oggetto in movimento all'interno della tela ma sto ottenendo qualche difficoltà nello spostare l'oggetto con area limite sul lato superiore e sinistro e quando ridimensiono l'oggetto con grande dimensione non sono in grado di limitare l'oggetto in movimento sul lato sinistro e superiore della tela

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

Basta aggiungere il codice qui sotto nel file js e cambiare il valore di scala X (a sinistra) e Y (in alto) secondo la vostra altezza e larghezza della tela.

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

Answer 2

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 3

Qui puoi trovare una soluzione: -

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 4

Ho appena modificato il codice di Balaji un po 'funziona meglio adesso

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

Answer 5

come avevo bisogno t la sua, ecco la mia eccessiva funzione basata sul codice di Balaji per impostare un offset, quindi gli oggetti possono essere mostrati solo parzialmente all'interno della tela.

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