如何在fabricjs中将画布原点设置为中心？答案

【问题标题】：How to set canvas origin to center in fabricjs?如何在fabricjs中将画布原点设置为中心？
【发布时间】：2020-09-15 01:22:05
【问题描述】：

当我在fabricjs 画布上画一个圆圈时，它总是出现在右下角，即使我将坐标设置为中心。我怎样才能使画布的圆绘制中心？

var circle = new fabric.Circle({
         top: 300,
         left: 300,
         radius: 100
});

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

您可以使用 originX 和 originY 属性将圆形对象的绘图原点设置为中心。

var canvas = new fabric.Canvas('c');

var circle = new fabric.Circle({
   top: 100,
   left: 100,
   radius: 50,
   originX: 'center',
   originY: 'center'
});

canvas.add(circle);

canvas{border:1px solid #ccc}

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

【讨论】：

谢谢！但是，如果我要设置不同的起源呢？这行得通吗？
是的，它会的。您可以根据需要设置x 和y 原点。

【解决方案2】：

你有 centerObject()。

     canvas.add(oImg)
     canvas.centerObject(circle);
     canvas.renderAll();

这会将你的圆圈设置在画布的中心。

【讨论】：