javascript - Comment déterminer si la position du point est sur la ligne tracée lorsqu'on clique sur la page Canvas? Quelque chose déclenche un événement sur une ligne tracée ?
Ce qui suit sont trois paragraphes de code souligné. Lorsque j'entre en mode édition ; lorsque je clique sur le bouton gauche de la souris, la position correspondante du bouton gauche dans vcanvas a été enregistrée. Comment puis-je savoir si le point sur lequel j’ai cliqué se trouve sur le segment de ligne que j’ai dessiné ?
//Voici le code clé souligné
ctx.beginPath();
var x1=parseInt( (quxian[0].GLB-M_qishi)*(Wmax/M_glb));
//速度第一个点的值
var y1=parseInt(main_h-(main_h-space_h)/100*quxian[0].SPEED);
var x2,y2;
for(var i=1;i<quxian.length;i++){
x2=parseInt( (quxian[i].GLB-M_qishi)*(Wmax/M_glb));
y2=parseInt(main_h-(main_h-space_h)/100*quxian[i].SPEED);
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
x1=x2;
y1=y2;
};
//console.log("第一个点："+x1+":::"+y1)
ctx.strokeStyle="green"; //线条颜色
ctx.stroke();
ctx.closePath();
ctx.beginPath();//管压------------------
x1=parseInt( (quxian[0].GLB-M_qishi)*(Wmax/M_glb));
var yy1=parseInt(main_h-(main_h-space_h)/600*quxian[0].GY);
var xx2,yy2;
for(var j=1;j<quxian.length;j++){
xx2=parseInt( (quxian[j].GLB-M_qishi)*(Wmax/M_glb));
yy2=parseInt(main_h- (main_h-space_h)/600*quxian[j].GY);
ctx.moveTo(x1,yy1);
ctx.lineTo(xx2,yy2);
x1=xx2;
yy1=yy2;
};
ctx.strokeStyle="#fff"; //线条颜色
ctx.stroke();
ctx.closePath();
ctx.beginPath();//牵引力----------------
x1=parseInt( (quxian[0].GLB-M_qishi)*(Wmax/M_glb));
var yyy1=parseInt(main_h-(main_h-space_h)/1000*quxian[0].QYL);
var xxx2,yyy2;
for(var k=1;k<quxian.length;k++){
xxx2=parseInt( (quxian[k].GLB-M_qishi)*(Wmax/M_glb));
yyy2=parseInt(main_h-(main_h-space_h)/1000*quxian[k].QYL);
//牵引力需要负数
ctx.moveTo(x1,yyy1);
ctx.lineTo(xxx2,yyy2);
x1=xxx2;
yyy1=yyy2;
}
ctx.strokeStyle="blue"; //线条颜色
ctx.stroke();
ctx.closePath();
//选线事件---------------------------------------------------------------
$("#xuanxian").click(function(){
var canvas = document.getElementById("ri");
var context = canvas.getContext("2d");
canvas.onclick = function(e) {
var bbox = canvas.getBoundingClientRect();
var x = parseInt( e.clientX - bbox.left * (canvas.width/bbox.width));//鼠标点击canvas图像里面的X位置；
var y = parseInt( e.clientY - bbox.top * (canvas.height/bbox.height));
//为什么不是直接e.clientY - bbox.top呢
console.log("点击时鼠标的坐标："+x+"，"+y)
//进行判断
if(true){
//这里执行在线上的事件
}else{
return false;
//这里执行未选中的事件
}
//alert(context.isPointInPath(83365,708));
};
}); 
