鼠標在畫布上的偏移量[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]

回答

相關問題