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

Question

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

在我的情况下，一切正常，60％。在其他40％的鼠标是抵消。 Demo here

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

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

Answer 1

你可以这样做：

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

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

Answer 2

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

在画布中添加导致问题的元素或在代码中调用canvas.calcOffset()方法之后，您只需要调用 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;}

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

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

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

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

Answer 5

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

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

{{1}}

希望这会有所帮助。祝你好运！