從中間縮放矩形對象fabricjs

Question

我在fabricjs畫布上有一個矩形對象。現在，當我嘗試縮放矩形時，它總是從固定角度縮放，並且只擴展到鼠標所在的方向。我想要的是，當我縮放它應該從中心擴展和擴大任何一方。我試着設置originX和originY，但那不起作用。誰可以幫我這個事？謝謝！

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

Answer 1

您需要centeredScaling屬性設置爲true爲矩形對象作出規模原產地中心......

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>