ファブリックの中心にキャンバスの原点を設定するにはどうすればよいですか？

Question

fabricjsキャンバスに円を描くと、座標を中央に設定しても常に右下に表示されます。どのようにしてキャンバスの円を描くことができますか？

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

Answer 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>

Answer 2

centerObject（）があります。

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

これは、キャンバスの中央にサークルを設定します。