我已经阅读了 3-5 个关于鼠标偏移的主题，但我仍然不知道哪里出了问题。
就我而言，60% 时一切正常。在其他 40% 鼠标被偏移。 Demo here.
有时对象位置与鼠标行为无关。 （IE 和 Chrome 最乱）
我尝试编辑样式表和父 div，但没有。最糟糕的是：我看不到任何规律性。如有任何帮助，我将不胜感激。
【问题讨论】：
标签： javascript html fabricjs
你可以这样做：
canvas.on("after:render", function(){ canvas.calcOffset() });
我只在创建画布后才这样做。这是没有调整大小事件时的临时调用。这就是bug出现的时候。
【讨论】：
由于页面上其他元素的定位，画布偏移值可能会发生变化。
您只需在画布中添加导致问题的元素或在代码中调用canvas.renderAll() 方法后调用canvas.calcOffset()。
【讨论】：
只要在 HTML 文档中移动画布，就会出现此偏移问题。例如，如果您在画布上方添加一个高度为 10px 的元素，则在首次渲染画布后，您的对象将偏移 10px。每当在 HTML 文档中重新定位画布时添加此代码，它应该重新计算鼠标交互性：
canvas.on("after:render", function(){
canvas.calcOffset();
});
每当调整窗口大小时，Fabric.js 都会自动调用此方法，这就是您在该事件中看不到问题的原因。
【讨论】：
难以置信！ 我已经修复了这个错误。你永远不会相信我...
在页面顶部是这样的代码：
<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>
...现在一切都正常了。
我看不出这些事件之间有任何关联，但事实就是事实。那一天对我来说真是太难了……
【讨论】：
对象在画布中的偏移位置很可能是由于 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();
希望这会有所帮助。祝你好运！
【讨论】：