从中间缩放矩形对象

从中间缩放矩形对象 - fabricjs(Scale rectangle object from middle – fabricjs)

我在fabricjs画布上有一个矩形对象。 现在，当我尝试缩放矩形时，它总是从固定的角落缩放，只扩展到鼠标的方向。 我想要的是，当我缩放时，它应该从中心缩放并扩展到任何一侧。 我尝试设置originX和originY但是没有用。 谁可以帮我这个事？ 谢谢！

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

I have a rectangle object on fabricjs canvas. Now, when I try to scale the rectangle it always scales from a fixed corner and only expands to the direction where the mouse is. What I want is, when I scale it should scale from center and expand either side. I tried setting originX and originY but that didn’t work. Can anyone help me on this? Thanks!

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

最满意答案

您需要将rectangleScaling属性设置centeredScaling true才能使矩形对象的'scale origin to center ...

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> 
  
 
You need to set centeredScaling property to true for the rectangle object to make its' scale origin to center ...
 
 
 
  
  
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>