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

我发现了几个用户可以拖动结构对象并捕捉到网格或其他对象的小提琴，但是，我找不到任何用户鼠标光标捕捉到网格或现有对象边界的示例

---

有可能吗？如果有，完成了吗？

很抱歉，没有直接的方法从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.即使鼠标未进入或离开元素，鼠标仍将触发mouseout和mouse over事件。你需要有一个解决方案来解决这个问题（即通过鼠标体而不是元素来听鼠标）
• 注意C.要停止光标在更新之间的摆动，请通过requestAnimationFrame而不是鼠标事件更改光标

---

感谢您的回复。当我问这个问题时，我试图概括，以便其他人可以使用这些信息，但是，这些方法似乎不适合我的情况。更多细节：想象一张画有不同角度的线条。我需要能够使用fabric.js（参见本例：）绘制线条，并捕捉到图片上的线条。我的想法是处理图像，得到黑色像素的坐标，然后将这些坐标放在fabricjs画布上，让鼠标光标捕捉到这些坐标。你的“小屏幕画布”给了我一个想法。请确认这是否是你的意思。如果我们有一个跟随光标的形状，比如在点击对象时的（）图，当对象接近某个特定坐标时，对象会跳转到远离鼠标的那个坐标。如果用户在该对象不在时单击，则第二个线条点将从该对象而不是鼠标处变为红色。这有意义吗？！：）虽然我不知道技术是否允许这样的事情。