设置面料对象的最小和最大调整大小限制

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本地设置缩放的最小限制。但是，没有可用于设置最大限制的开箱即用解决方案。