Scale Rechteck Objekt aus der Mitte - fabricjs

Question

Ich habe ein Rechteck Objekt auf fabricjs Leinwand. Wenn ich nun versuche, das Rechteck zu skalieren, skaliert es immer von einer festen Ecke und expandiert nur in die Richtung, in der sich die Maus befindet. Was ich will ist, wenn ich es skalieren sollte vom Zentrum aus skalieren und beide Seiten erweitern. Ich habe versucht, OriginX und OriginY zu setzen, aber das hat nicht funktioniert. Kann mir jemand dabei helfen? Vielen Dank!

var rect = new fabric.Rect({ 
top: 150, 
left: 150, 
width: 100, 
height: 100, 
fill: 'black', 
originX: 'center', 
originY: 'center', 
}); 

Answer 1

Sie benötigen centeredScaling Eigenschaft true für das Rechteck-Objekt setzen ihre Skala Ursprung Zentrum zu machen ...

var canvas = new fabric.Canvas('c'); 
 
var rect = new fabric.Rect({ 
 
    top: 100, 
 
    left: 100, 
 
    width: 50, 
 
    height: 50, 
 
    fill: 'black', 
 
    originX: 'center', 
 
    originY: 'center', 
 
    centeredScaling: true 
 
}); 
 

 
canvas.add(rect).renderAll();

canvas{border: 1px solid #ccc}

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