javascript - When the mouse is clicked on the Canvas page, how to determine whether the position of the point is on the line drawn in it? Something triggers an event on a drawn line?

Question

Below is the three underlined code. When I enter the editing mode myself; when I click the left button of the mouse, the corresponding position of the left button in vcanvas has been recorded. How can I tell if the point I clicked is on the line segment I drew?

//This is the underlined key code

        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));
            };    
        }); 

Answer 1

Generally, like this, you need to first set a selectable range for the line segment (x, y of the four vertices), just like writing a game.
Then determine the selection range of which object the mouse is located by getting the mouse coordinates in the canvas. At this time, you can consider using the observer mode to implement event binding.
As for the algorithm to determine whether the coordinates are within the range, it can be determined by the ray method (taking into account that the line segment may be rotated and scaled).

Although I want to help you with this, the source code I wrote is gone after I broke my computer hard drive not long ago.
Let me write down the basic ideas for you:
1. First, set the range by looking at the example in the comments. Once the four vertices are set, we basically have an active range. As for how big the range is, it depends on your personal needs.

2. "Observer mode" (publisher-subscriber mode) can be searched online for the basic code. It is actually very easy to understand.

3. As for the algorithm of coordinates after rotation, click here (note that this is the formula for counterclockwise rotation) and just apply it directly.

4. For the ray method, you may need to use vectors to calculate, please recall your high school mathematics.

I have fixed the links for you, just learn it slowly first. It seems annoying, but it's actually very easy once you understand it.