Jquery 如何检测鼠标位置是否悬停

我有这个指示如何制作铅笔工具

---

如何使用铅笔工具检测鼠标是否悬停在绘图区域/点/图像上？然后，它将通过在起点和终点上创建一个圆来突出显示起点和终点。

您可以从画布获取（每像素）图像数据：。然后检查鼠标是否悬停在绿色像素上。

这里是一个快速演示。将鼠标移动到线条两端5px范围内，以查看参考线

其思想是，它使用碰撞检测来确定鼠标是否位于线条起点或终点的5个像素范围内

您可以轻松地将难看的方形辅助线更改为圆形。你基本上可以做你想做的事

var canvas=document.createElement（'canvas'），
ctx=canvas.getContext（'2d'）；
画布宽度=500；
画布高度=400；
document.body.appendChild（画布）；
//添加任意多的行
变量行=[
{开始：{x:100，y:100}，结束：{x:200，y:300}，
{开始：{x:200，y:150}，结束：{x:50，y:250}，
{开始：{x:240，y:240}，结束：{x:450，y:150}，
{开始：{x:160，y:340}，结束：{x:10，y:90}，
{开始：{x:380，y:270}，结束：{x:300，y:380}
];
函数render（）{
ctx.clearRect（0,0500400）；
对于（var c=0；cline[c].start.x-5&&
鼠标.x<行[c].开始.x+5&&
鼠标.y>行[c].start.y-5&&
鼠标.y<行[c].开始.y+5）||
//这一行的末尾也一样
（mouse.x>line[c].end.x-5&&
鼠标.x行[c].end.y-5&&
鼠标.y

正文{
保证金：0；
}

在您的情况下，唯一的解决方案是将所有绘制的点保存到阵列中，这些点本身保存在一个包含所有路径的阵列中：

• onmousedown

  ：创建一个新的路径数组

• onmousemove

  ：
  --如果绘制->用每个绘制的点填充当前路径的数组。
  --else->检查实际鼠标坐标是否在任何路径数组中

var ctx=canvas.getContext（“2d”），
绘画=假，
线宽=1；
canvas.width=canvas.height=600；
var dCanvas=canvas.cloneNode（true）；
dCtx=dCanvas.getContext（'2d'）；
pCanvas=canvas.cloneNode（true）；
pCtx=pCanvas.getContext（'2d'）；
dCtx.fillStyle=“#FFF”；
pCtx.fillStyle=“红色”；
ctx.fillRect（0,060600）；
变量路径=[]，
电流通路；
canvas.onmousedown=函数（e）{
currentPath=[]；
路径推送（currentPath）；
绘画=真实；
};
canvas.onmouseup=函数（e）{
绘画=假；
}
canvas.onmousemove=函数（e）{
pCtx.clearRect（0，0，canvas.width，canvas.height）；
var mouseX=e.pageX-this.offsetLeft，
mouseY=e.pageY-this.offsetTop；
如（绘画）{
var lastPoint=currentPath[currentPath.length-1]||{
x:e.pageX-canvas.offsetLeft，
y:e.pageY-canvas.offsetTop
};
var x1=鼠标，
x2=最后一点.x，
y1=老鼠，
y2=最后一点y；
var陡峭=（数学abs（y2-y1）>数学abs（x2-x1））；
如果（陡峭）{
var x=x1；
x1=y1；
y1=x；
变量y=y2；
y2=x2；
x2=y；
}
如果（x1>x2）{
var x=x1；
x1=x2；
x2=x；
变量y=y1；
y1=y2；
y2=y；
}
变量dx=x2-x1，
dy=数学绝对值（y2-y1），
错误=0，
de=dy/dx，
yStep=-1，
y=y1；
if（y1=0.5）{
y+=yStep；
误差-=1.0；
}
}
push（{x:mouseX，y:mouseY}）；
}否则{
forEach（函数（路径）{
if（路径部分（函数点）{
返回isBetween（mouseX，point.x，5）和&isBetween（mouseY，point.y，5）
})) {
pCtx.beginPath（）；
圆弧（路径[0].x+2.5，路径[0].y+2.5,5,0，数学.PI*2）；
pCtx.fill（）；
pCtx.beginPath（）；
圆弧（路径[path.length-1].x+2.5，路径[path.length-1].y+2.5,5,0，Math.PI*2）；
pCtx.fill（）；
}
});
}
ctx.fillRect（0,060600）；
ctx.drawImage（dCanvas，0,0）；
ctx.drawImage（pCanvas，0,0）；
}
函数介于（x，y，z）之间{
返回（x>=y-z&&x注意：如果您第一次没有得到想要的答案，请不要删除并重新发布同一个问题。@SpencerWieczorek注意到但如果我要获得per pizel，我将如何获得第一点和最后一点？@AJB您从传递给mousedown的事件对象获得第一点，从事件o获得第二点对象传递给mouseup。除了获取像素外，还有其他解决方案吗？如果有其他绿色像素而不是您声明的像素呢？@AJB您的意思是不同的绿色色调？在这种情况下，您可以检查像素是否为白色（或透明，取决于您拥有的颜色）.这是一个很好的例子，但你不想每次都硬编码lines@AJB只需创建一个包含所有行的数组