Fabric.js : 更改椭圆中的 originX 会更改左侧位置

Question

我遇到的情况是我从 originX='right' 在 fabric.js 中绘制一个椭圆，并且然后将其更改为 originX='left'。我看到的是在将 originX 更改为左侧并通过以下计算调整左侧后：

ellipse.left -= ellipse.width

我仍然看到左侧位置有所不同。

为了解释它，我添加了一个 fiddle where I added a timeout of 3 seconds before changing the originX. So, please open the 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

因为椭圆的笔画有一些宽度，因此，您还需要从椭圆的[=28]中排除它=]左边的位置，像这样...

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>

Fabric.js : 更改椭圆中的 originX 会更改左侧位置

Fabric.js : changing originX in ellipse changes left position

javascript

html5-canvas

fabricjs