鼠标在画布上的偏移量[fabric.js]

我已经阅读了3-5个关于鼠标偏移量的主题，但是我仍然无法弄清楚在哪里混乱。鼠标在画布上的偏移量[fabric.js]

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

有时物体位置与鼠标行为无关。（IE & Chrome有bigest混乱）

我试图编辑样式表和父div但没有。最糟糕的是：我没有看到任何规律。我会很乐意提供任何帮助。

来源

2012-07-25 Yevgen

你能描述一下你想用fabric.js做什么，什么不工作？如果你可以发布你的代码不工作的部分，那也是有帮助的。 – 2012-07-25 18:41:36

嗯，我插入文字和图像。你可以在演示页面上看到它。有时物体位置与鼠标行为无关。在日志中没有错误，所以我不知道想要显示的代码的一部分。这是可能的，它关于样式表... – Yevgen 2012-07-25 18:56:45

这是令人难以置信的！我修复了这个错误。你永远不会相信我...

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

<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-26 01:45:14 Yevgen

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

你只需要调用canvas.calcOffset()将在画布导致该问题的一个元素后或调用的代码canvas.renderAll()方法之后。

来源

2012-08-14 02:14:34

你可以这样做：

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

我只做到这一点后，我创建画布。当没有调整大小事件时，这是临时调用。那是什么时候出现错误。

来源

2013-05-26 03:23:58

这立即解决了我的问题。 – 2013-10-20 04:39:59

非常好，这是迄今为止我在这个愚蠢的bug中遇到的最有用的答案 – JDandChips 2014-01-29 09:59:02

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

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

Fabric.js自动调用此方法，每当窗口大小，这就是为什么你不看问题在那个事件。

来源

2014-06-26 20:49:46 Marquizzo

试过了，对我没有帮助。一直在大约3-4px的时候出现问题。 – 2016-02-01 11:51:48

画布内对象的偏移定位最有可能是由画布的原始坐标以及由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-02 21:56:24

鼠标在画布上的偏移量[fabric.js]

回答

相关问题