8

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

就我而言，60% 的情况下一切正常。在其他 40% 鼠标被偏移。演示在这里。

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

我试图编辑样式表和父 div 但没有。最糟糕的是：我看不到任何规律性。我会很感激任何帮助。

4

5 回答 5

16

你可以这样做：

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

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

于 2013-05-26T03:23:58.797 回答
3

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

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

于 2012-08-14T02:14:34.567 回答
2

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

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

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

于 2014-06-26T20:49:46.137 回答
1

难以置信！我已经修复了这个错误。你永远不会相信我...

在页面顶部，代码如下：

<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>

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

我看不出这些事件之间有任何关联，但事实就是事实。那一天对我来说真是太难了……

于 2012-07-26T01:45:14.867 回答
0

对象在画布中的偏移位置很可能是由 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();

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

于 2015-11-02T21:56:24.133 回答