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

Question

我已经阅读了3-5个关于鼠标偏移的主题，但我仍然不能理解哪里是乱七八糟的。

在我的例子中，60%的情况下一切都很好。另外40%的鼠标是偏移量。Demo here。

有时对象位置与鼠标行为无关。(IE和Chrome的混乱程度最大)

我尝试过编辑样式表和父div，但是什么都没有。最糟糕的是:我看不到任何规律性。我将非常感谢任何人的帮助。

Answer 1

这太不可思议了！我已经修复了这个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 2

您可以这样做：

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

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

Answer 3

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

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