將對象限制到畫布邊界時出現問題

Question

我目前正在使用我的項目運行，並且使用布料js來處理畫布。在那我想我的畫布對象不走出畫布邊界。我做了this code，它工作正常，直到我旋轉它。但是當我旋轉對象時，該對象的左上角逐漸變大，而且我的代碼運行不正常。我想要一些解決方案，可以在任何情況下工作，但我的對象不應該超出畫布邊界。 感謝

var canvas=new fabric.Canvas('demo'); 
 
canvas.on('object:moving',function(e){ 
 
    if(e.target.getWidth()+e.target.left>canvas.width) 
 
    { 
 
     e.target.set('left',canvas.width-e.target.getWidth()); 
 
     e.target.setCoords(); 
 
     canvas.renderAll(); 
 
    } 
 
    if(e.target.getHeight()+e.target.top>canvas.height) 
 
    { 
 
     e.target.set('top',canvas.height-e.target.getHeight()); 
 
     e.target.setCoords(); 
 
     canvas.renderAll(); 
 
    } 
 
    if(e.target.top<0) 
 
    { 
 
     e.target.set('top',0); 
 
     e.target.setCoords(); 
 
     canvas.renderAll(); 
 
    } 
 
    if(e.target.left<0) 
 
    { 
 
     e.target.set('left',0); 
 
     e.target.setCoords(); 
 
     canvas.renderAll(); 
 
    } 
 
}); 
 
var text=new fabric.IText('Jayesh'); 
 
canvas.add(text);

<script src="http://fabricjs.com/lib/fabric.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<canvas id="demo" style="width:100px;height:100px;border: 1px solid black"></canvas>

Answer 1

請試試這個。

http://jsfiddle.net/gaz704v7/

var canvas=new fabric.Canvas('demo'); 
    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); 
     } 
    }); 
    var text=new fabric.IText('Jayesh'); 
    canvas.add(text);