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

Mouse offset in canvas [fabric.js]

本文关键字：fabric js 偏移量 布中 鼠标      更新时间：2024-02-27

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

就我而言，60%的情况下一切都很好。在其他40%的鼠标是偏移的。在这里演示。

有时对象位置与鼠标行为无关。（IE和Chrome最糟糕）

我尝试过编辑样式表和父div，但什么都没有。最糟糕的是：我看不出任何规律。如果有任何帮助，我将不胜感激。

您可以这样做：

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>

此代码与canvas没有合理的关系。这个类有简单的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();

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

相关文章：