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

Question

我已经阅读了3-5个关于鼠标偏移的主题，但我仍然不知道问题出在哪里。

在我的情况下，60%的情况下一切正常。在另外40%的情况下，鼠标会偏移。演示请点击这里。

有时物体的位置与鼠标的行为没有关系。（IE和Chrome最混乱）

我尝试过编辑样式表和父级div，但是没有效果。最糟糕的是：我看不到任何规律。非常感谢您的帮助。

- Yevgen

---

你能描述一下你在使用fabric.js时想要做什么，以及目前遇到了哪些问题吗？如果你能够贴出你的代码中出现问题的部分，那将会更有帮助。 - George

好的，我正在插入文本和图像。您可以在演示页面上看到它。有时对象位置与鼠标行为无关。日志中没有错误，因此我不知道应该显示哪个代码部分。可能是样式表的问题... - Yevgen

Answer 1

你可以这样做：

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

在创建画布之后，我才执行这个操作。这是一个临时调用，当没有调整大小事件发生时会出现错误。

- Ashish Kaila

---

这立即为我解决了问题。 - Michael J. Calkins

非常好，这绝对是我在解决这个愚蠢的错误时遇到的最有用的答案。 - JDandChips

Answer 2

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

在canvas中添加导致问题的元素或调用canvas.renderAll()方法后，只需要调用canvas.calcOffset()即可解决问题。

- Ghost-Man

Answer 3

每当画布在HTML文档中移动时，就会出现偏移问题。例如，如果您在画布上方添加一个高度为10px的元素，在第一次渲染画布后，您的对象将偏移10px。每当画布在HTML文档中重新定位时，请添加此代码，它应该重新计算鼠标交互：

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

Fabric.js会在窗口大小改变时自动调用此方法，这就是为什么您在该事件上看不到问题的原因。

- M -

---

尝试过了，对我没有帮助。始终存在大约3-4像素的偏移量。 - Paweł Szczur

Answer 4

真不敢相信！我修复了这个漏洞。你绝对不会相信...

在页面顶部有这样的代码：

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

这段代码与画布没有任何合理的关系。这个类只有简单的CSS：{float: left; margin: 10px 0 0 0;}

但由于某种原因，这段代码在画布中强制鼠标偏移。我重新制作了这段代码：

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

...现在一切似乎都正常工作。

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

- Yevgen

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

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

- ImaJedi4ever