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

时间:2017-06-15 13:54:11

标签: javascript html5-canvas fabricjs

我遇到的情况是我在fabric.js中绘制一个椭圆,来自originX ='右边'和 然后将其更改为originX =' left'。 我看到的是将originX更改为left并通过以下计算调整左边:

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);

1 个答案:

答案 0 :(得分:2)

因为,椭圆笔划有一些宽度,因此,您还需要从椭圆左侧位置排除它,就像这样。 ..

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>