捕捉鼠標光標移動到電網和/或物體

Question

我已經發現一對夫婦小提琴，用戶可以拖動面料的對象，他們捕捉到任何一個網格或其他對象，但是，我無法找到任何例子，其中用戶的鼠標光標捕捉到網格或現有對象的邊界。

是否有可能，如果是，則它做了什麼？

Answer 1

抱歉地說，沒有設置從JavaScript光標位置沒有直接的方法。

對於您的情況（只要網格間距不大），您可以設置element.style.cursor = "url('pointer.png') 9 26, pointer"並更改最後兩個數字（熱點）以相對於它自己移動鼠標。當熱點保持不變時，鼠標會出現對齊座標，但熱點會移動。

var grid = 16; 
// assume mouseX, mouseY are mouse coords. 
var offsetX = mouseX % grid; 
var offsetY = mouseY % grid; 
// element is the element you are listening to mouse events from 
// pointer.png is an image of the cursor 
element.style.cursor = "url('pointer.png') "+ offsetX + " " + offsetY + ", pointer" 

備選地

保持熱點並使用一個小屏幕外畫布以繪製光標由正確的偏移量。然後使用canvas.toDataURL創建光標樣式URL。

• 注意A.這兩種方法都不移動鼠標位置，只是可視化。鼠標仍會報告其真實位置。您將不得不調整鼠標事件偵聽器來補償偏移量。
• 注意B.即使鼠標沒有進入或離開元素，鼠標也會觸發鼠標懸停和鼠標懸停事件。你需要有一個解決方案來處理這個問題（即通過身體而不是元素來聽聽鼠標）。
• 注C.要停止更新之間的光標滑動，請通過requestAnimationFrame更改光標，而不是鼠標事件。