我遇到了一种情况,我在fabric.js中从originX='right'绘制一个椭圆并且 之后将其更改为 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);
最佳答案
由于椭圆的笔划有一定的宽度,因此,您还需要从椭圆的左侧位置排除它,如下所示。 ..
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>
关于javascript - Fabric.js : changing originX in ellipse changes left position,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44569367/