javascript - Apabila tetikus diklik pada halaman Kanvas, bagaimana untuk menentukan sama ada kedudukan titik berada pada garisan yang dilukis di dalamnya? Sesuatu mencetuskan acara pada garisan yang dilukis?
Berikut ialah tiga perenggan kod yang digariskan Apabila saya memasuki mod pengeditan; apabila saya mengklik butang kiri tetikus, kedudukan yang sepadan dengan butang kiri dalam vcanvas. Bagaimanakah saya boleh mengetahui sama ada titik yang saya klik adalah pada segmen garisan yang saya lukis?
//Ini ialah kod kunci yang digariskan
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));
};
}); 
