設置面料對象的最小和最大調整大小限制

Question

我正在使用面料js調整大小對象我希望用戶調整最小限制的對象大小&。如何使用面料js來做到這一點。

我試過的屬性，如

lockScalingX，lockScalingY，lockMomentX，lockMomentY但沒有運氣。

任何幫助將不勝感激。

感謝，

Answer 1

有沒有辦法在布料做它本身，但是你可以連接到縮放事件，並作出修改，你應該喜歡的對象。在這段代碼中，我停止縮放以及在騎行縮放時從頂部/左側移動正確的織物。

window.canvas = new fabric.Canvas('c'); 
 

 
var rect = new fabric.Rect({ 
 
    left: 100, 
 
    top: 100, 
 
    width: 50, 
 
    height: 50, 
 
    fill: '#faa', 
 
    originX: 'left', 
 
    originY: 'top', 
 
    stroke: "#000", 
 
    strokeWidth: 1, 
 
    centeredRotation: true 
 
}); 
 

 
canvas.add(rect); 
 

 
var maxScaleX = 2; 
 
var maxScaleY = 2; 
 

 
rect.on('scaling', function() { 
 
    if(this.scaleX > maxScaleX) { 
 
    this.scaleX = maxScaleX; 
 
    this.left = this.lastGoodLeft; 
 
    this.top = this.lastGoodTop; 
 
    } 
 
    if(this.scaleY > maxScaleY) { 
 
    this.scaleY = maxScaleY; 
 
    this.left = this.lastGoodLeft; 
 
    this.top = this.lastGoodTop; 
 
    } 
 
    this.lastGoodTop = this.top; 
 
    this.lastGoodLeft = this.left; 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
<canvas id="c" width="600" height="600"></canvas>

Answer 2

可能會派上用場的人尋找類似的答案。

您可以通過設置minScaleLimit本地設置縮放的最小限制。但是，沒有可用於設置最大限制的開箱即用解決方案。