画布中的鼠标偏移[fabric.js]

Question

我已经阅读了关于鼠标偏移的3-5个主题，但我仍然无法得到混乱的地方。

在我的情况下，一切正常，60％。 在其他40％的鼠标是抵消。 在这里演示 。

有时对象位置与鼠标行为无关。 （IE和Chrome有最大的混乱）

我试过编辑样式表和父div但什么都没有。 最糟糕的事情：我没有看到任何规律性。 我会很乐意帮助你。

Answer 1

你可以这样做：

canvas.on("after:render", function(){ canvas.calcOffset() });

我只在创建画布后才这样做。 当没有调整大小事件时，这是临时调用。 那就是bug出现的时候。

Answer 2

由于页面上其他元素的定位，画布偏移值可能会改变。

您只需要在canvas.calcOffset()添加导致问题的元素或在代码中调用canvas.renderAll()方法之后调用canvas.renderAll() 。

Answer 3

只要在HTML文档中移动画布，就会发生此偏移问题。 例如，如果在画布上方添加高度为10px的元素，则在首次渲染画布后，对象将偏移10px。 每当画布在HTML文档中重新定位时添加此代码，它应重新计算鼠标交互性：

canvas.on("after:render", function(){
    canvas.calcOffset();
});

每当窗口调整大小时，Fabric.js都会自动调用此方法，这就是您在该事件上看不到问题的原因。

Answer 4

真令人难以置信！ 我修复了这个bug。 你永远不会相信我......

在页面顶部，代码如下：

<div class="logo">
<a href="/"><img src="logo.png" alt="" /></a>
</div>

此代码与canvas没有合理的关系。 这个类有简单的css： {float: left; margin: 10px 0 0 0;} {float: left; margin: 10px 0 0 0;}

但由于某种原因，此代码强制在画布中使用鼠标偏移。 我重新编写了这样的代码：

<div class="logo">
<a href="/" class="logoHref"></a><!--- image is in css bg --->
</div>

......现在一切都认为工作正常。

我没有看到这些事件之间的任何关联，但事实是事实。 那对我来说真是个艰难的一天......

Answer 5

画布中对象的偏移定位很可能是由画布的原始坐标和DOM操作更改的子对象引起的。

我发现一个简单的解决方案是确保在添加后立即设置我添加到画布的任何对象的坐标。 例如，如果您假设对象是图像，则执行以下操作：

var canvas = new fabric.Canvas(); 
var image = new Image();

canvas.add( image );
image.center() // Optional if you wish the object centered on canvas
image.setCoords();

希望这可以帮助。 祝好运！