从中间缩放矩形对象 - fabricjs

时间:2017-06-04 18:11:39

标签: javascript fabricjs

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

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

1 个答案:

答案 0 :(得分: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>