Fabric.js畫布邊界檢測

Question

我是Fabric.js的新手。

我想在畫布內顯示一個可移動/可調整大小的矩形，但限制用戶操作，使其無法在畫布外移動/放大。

有沒有簡單的方法來設置這些約束？我是否需要手動檢測畫布邊界？

Answer 1

對象縮放或拖動後，它會找到位置。如果位置超出邊界，則會將對象恢復到之前的狀態。

canvas.on('object:modified', function (e) { 
    var obj = e.target; 
    var rect = obj.getBoundingRect(); 

    if (rect.left < 0 
     || rect.top < 0 
     || rect.left + rect.width > canvas.getWidth() 
     || rect.top + rect.height > canvas.getHeight()) { 
     if (obj.getAngle() != obj.originalState.angle) { 
      obj.setAngle(obj.originalState.angle); 
     } 
     else { 
      obj.setTop(obj.originalState.top); 
      obj.setLeft(obj.originalState.left); 
      obj.setScaleX(obj.originalState.scaleX); 
      obj.setScaleY(obj.originalState.scaleY); 
     } 
     obj.setCoords(); 
    } 
    }); 

更多例如：http://sett.ociweb.com/sett/settJun2014.html