从中间缩放矩形对象——fabricjs

【问题标题】：Scale rectangle object from middle – fabricjs从中间缩放矩形对象——fabricjs
【发布时间】：2017-11-05 12:59:25
【问题描述】：

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

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

【问题讨论】：

标签： javascript fabricjs

【解决方案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>

【讨论】：