Fabric.js：ellipseのoriginXを左に変更する

Question

originX = 'right'からfabric.jsで楕円を描いていて、その後 originX = 'left'に変更している状況があります。私が見る何 は、次の計算によって残されたままにするoriginXを変更して調整した後、次のとおりです。

ellipse.left -= ellipse.width 

私はまだ左の位置の違いを参照してください。

説明するには、fiddleを追加しました。ここで、originXを変更する前に3秒のタイムアウトを追加しました。したがって、fiddleを開き、3秒待って、理想的には変化しない位置がどのように変化するかを見てください。 私がやっている間違いや何かアドバイスはありますか？そのような

var canvas = new fabric.Canvas('paper'); 
var ellipse = new fabric.Ellipse({ 
    left: 300, 
    top: 10, 
    rx: 145, 
    ry: 65, 
    strokeWidth: 4, 
    stroke: 'blue', 
    fill: '', 
    originX: 'right', 
    originY: 'top' 
}); 
canvas.add(ellipse); 
canvas.renderAll(); 
var log = document.getElementById('log'); 
log.innerHTML = ellipse.left; 
//changing the origin 
setTimeout(function() { 
    ellipse.originX = 'left'; 
    ellipse.left -= ellipse.width; 
    canvas.renderAll(); 
    log.innerHTML += ', ' + ellipse.left; 
}, 3000); 

Answer 1

楕円のストロークが故に、それにはいくつかの幅を持っている、あなたもそれを除外する必要があるだろう、楕円から'、以来の左の位置、：

コード。 ..

ellipse.left -= ellipse.width + ellipse.strokeWidth; 

または

ellipse.left = ellipse.left - ellipse.width - ellipse.strokeWidth; 

ここ

こんにちは、それは完全に正常に動作

var canvas = new fabric.Canvas('paper', { 
 
    isDrawingMode: false 
 
}); 
 
var ellipse = new fabric.Ellipse({ 
 
    left: 300, 
 
    top: 10, 
 
    rx: 145, 
 
    ry: 65, 
 
    strokeWidth: 4, 
 
    stroke: 'blue', 
 
    fill: false, 
 
    originX: 'right', 
 
    originY: 'top' 
 
}); 
 
canvas.add(ellipse); 
 
canvas.renderAll(); 
 
var log = document.getElementById('log'); 
 
log.innerHTML = ellipse.left; 
 

 
//changing the origin 
 
setTimeout(function() { 
 
    ellipse.originX = 'left'; 
 
    ellipse.left -= ellipse.width + ellipse.strokeWidth; 
 
    canvas.renderAll(); 
 
    log.innerHTML += ', ' + ellipse.left; 
 
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script> 
 
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas> 
 
<div id='log'></div>