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?

Question

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

Answer 1

Secara amnya, seperti ini, anda perlu menetapkan julat yang boleh dipilih terlebih dahulu untuk segmen garisan (x, y daripada empat bucu), sama seperti menulis permainan.
Kemudian tentukan julat pemilihan objek yang mana tetikus terletak dengan mendapatkan koordinat tetikus dalam kanvas Pada masa ini, anda boleh mempertimbangkan untuk menggunakan mod pemerhati untuk melaksanakan pengikatan peristiwa.
Bagi algoritma untuk menentukan sama ada koordinat berada dalam julat, ia boleh ditentukan dengan kaedah sinar (dengan mengambil kira bahawa segmen garisan boleh diputar dan berskala).

Walaupun saya ingin membantu anda dengan ini, kod sumber yang saya tulis telah hilang selepas saya memecahkan cakera keras komputer saya tidak lama dahulu.
Izinkan saya menulis idea asas untuk anda:
1 Mula-mula, tetapkan julat dengan melihat contoh dalam ulasan Setelah empat bucu ditetapkan, kami pada asasnya mempunyai julat yang aktif. ia bergantung kepada keperluan peribadi anda.

2. "Mod pemerhati" (mod penerbit-pelanggan) boleh dicari dalam talian untuk kod asas sebenarnya.

3 Bagi algoritma koordinat selepas putaran, klik di sini (perhatikan bahawa ini adalah formula untuk putaran lawan jam) dan gunakan terus.

4 Untuk kaedah sinar, anda mungkin perlu menggunakan vektor untuk mengira, sila ingat matematik sekolah menengah anda.

Saya telah menetapkan pautan untuk anda, cuma belajar perlahan-lahan dahulu. Ia kelihatan menjengkelkan, tetapi ia sebenarnya sangat mudah apabila anda memahaminya.