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

时间:2016-03-16 02:41:28

标签: canvas html5-canvas fabricjs

我找到了几个小玩意儿,用户可以拖动布料对象并将它们捕捉到网格或其他对象,但是,我无法找到用户鼠标光标捕捉到网格或现有边框的任何示例对象

是否可能,如果可以,是否已完成?

1 个答案:

答案 0 :(得分:0)

很抱歉,没有直接的方法来设置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而不是鼠标事件更改光标。
寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1