将鼠标光标捕捉到网格和/或对象

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而不是鼠标事件更改光标。