當鼠標移過其他頁面元素時，Konvas拖動算法會導致跳過 - 在1.6.2中破解，在1.6.3中解決

在這段代碼中，當我拖動Konvas畫布周圍的綠色矩形時，一切正常。但是，當我繼續拖動並且鼠標移動到頂部欄上時，例如，綠色矩形在鼠標指針下跳轉。當鼠標移過其他頁面元素時，Konvas拖動算法會導致跳過 - 在1.6.2中破解，在1.6.3中解決

我做錯了什麼？

感覺拖動代碼正在使用mousemove事件參數相對於指針下方的元素，而不是頁面。也許就像event.clientX &Ÿ代替event.pageX & Y.

編輯：我添加了一個灰色的div絕對定位在畫布上 - 嘗試在畫布上拖動綠色矩形所以鼠標掠過灰框。跳躍跳躍跳動。

// add a stage 
 
var s = new Konva.Stage({ 
 
    container: 'container', 
 
    width: 400, 
 
    height: 400 
 
}); 
 

 
// add a layer   
 
var l = new Konva.Layer(); 
 
s.add(l); 
 

 
// Add a green rect to the LAYER 
 
var green = new Konva.Rect({stroke: 'lime', width:100, height: 100, draggable: true, x: 20, y: 20}); 
 
l.add(green); 
 

 
l.draw()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.2/konva.min.js"></script> 
 

 

 
<body> 
 
    <div id="top" style='width: 600px; height: 50px; border: 1px solid #ccc;'><span>Top bar</span> 
 
    <span> Pos: </span><span id='pos'> Drag the green rect, watch it jump when mouse moves over this bar.</span> 
 
    </div> 
 

 
    <div id="container" style='width: 600px; height: 500px; border: 1px solid #ccc;'></div> 
 

 
    <div id="blob" style='width: 40px; height: 40px; border: 1px solid #ccc; background-color: #ccc; position: absolute; left: 250px; top: 80px;'></div> 
 

 

 
</body>

來源

2017-05-24 Vanquished Wombat

如果拖動到左側，也會發生同樣的情況。如果你能看到它，同樣會發生在右側和底部。似乎在可拖動離開其容器時發生。也許你可以用dragBoundFunc改變這個行爲 – juvian

謝謝@juvian。我也意識到這一點，只是想保持簡單的例子。在我看來，我無意中將形狀拖過了另一個元素，那麼它就不應該像現在這樣跳躍。我非常肯定，在今年5月份之前的Konvas.js的早期版本中可以。 –

我發現只有類似的東西https://github.com/konvajs/konva/issues/231。也許你應該開新問題 – juvian

這是一個錯誤。它與新版本v1.6.3修復，現在它應該按預期工作。

來源

2017-05-24 18:55:01 lavrton

非常感謝@lavrton。對不起，只是返回查看您的Github問題的請求。我現在還要設置一個還是太遲了？ –

@VanquishedWombat啊，沒有。我們現在不需要它。 :) – lavrton

我可以證實，在我的問題代碼片段中，如果我在腳本URL中替換1.6.3，那麼錯誤消失了。幹得好，謝謝。 –

當鼠標移過其他頁面元素時，Konvas拖動算法會導致跳過 - 在1.6.2中破解，在1.6.3中解決

回答

相關問題