ファブリックオブジェクトの最小および最大リサイズ制限

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を設定することでネイティブに設定できます。ただし、最大限度を設定するためのすぐに使えるソリューションはありません。