javascript - 滑鼠在Canvas頁面上點擊,怎麼確定點的位置是否在其中畫的線上?在畫的線上事觸發事件?
世界只因有你
世界只因有你 2017-06-13 09:24:19
0
1
1173

下面這是三段劃線的程式碼,當我自己進入編輯模式後;我點擊滑鼠左鍵時,已經記錄出左鍵在vcanvas裡的對應位置。我要怎麼判斷我點擊的點是否在我畫的線段上?

//這是劃線 關鍵程式碼

        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));
            };    
        }); 
世界只因有你
世界只因有你

全部回覆(1)
阿神

一般像這種你需要先為線段設定一個可以選取的範圍(四個頂點的x,y),就跟寫遊戲一樣。
接著透過取得canvas內的滑鼠座標來判斷滑鼠位於哪個物件的選取範圍,這時你可以考慮用觀察者模式來實現事件的綁定。
至於判斷座標是否在範圍內的演算法 可以用射線法(考慮線段可能會旋轉和縮放)來判定。

這個雖然我很想幫你,但我寫好的源碼在不久前把電腦硬碟摔壞後就沒了。
我給你寫下基本思路吧:
1.首先設定範圍就看評論裡的例子,四個頂點設好了我們基本上就有了活動的區間,至於區間範圍有多大看你個人需求。

2.「觀察者模式」(發布-訂閱者模式)可以網路搜尋基本程式碼,其實很容易懂的。

3.至於旋轉後座標的演算法,點這裡(注意這裡是逆時針旋轉的公式),直接套用就好。

4.射線法你可能需要用到 向量 來計算,請回憶下你的高中數學。

連結我都給你補好了,先慢慢學吧。看起來很煩,但懂了其實就很容易。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板