Objekt innerhalb Canvas Boundary Limit bewegen

Question

Ich versuche, das bewegte Objekt innerhalb der Leinwand zu begrenzen, aber ich bekomme einige Schwierigkeiten, um Objekt mit Limit-Bereich auf der oberen und linken Seite zu bewegen und wenn ich das Objekt mit großer Größe skaliere, auch ich bin nicht in der Lage das sich bewegende Objekt auf der linken und oberen Seite der Leinwand

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

fügen Sie einfach den Code unten in Ihre js-Datei, und ändern Sie den Wert der Skala X (links) und Y (oben) nach Ihren begrenzen Leinwand Höhe und Breite.

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

Hier finden Sie Lösung: -

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

I Aktualisiert nur Balaji den Code ein bisschen besser funktioniert jetzt

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

Als ich brauchte t Hier ist meine überarbeitete Funktion, die auf dem Code von Balaji basiert, um einen Offset zu setzen, so dass Objekte nur teilweise innerhalb der Leinwand gezeigt werden können.

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