問題描述

下面這是三段劃線的代碼，當我自己進入編輯模式后；我點擊鼠標左鍵時，已經記錄出左鍵在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)); }; });

問題解答

一般像這種你需要先給線段設定一個可以選取的范圍（四個頂點的x,y），就跟寫游戲一樣。然后通過獲取canvas內的鼠標坐標來判斷鼠標位于哪個對象的選取范圍，這時你可以考慮用觀察者模式來實現事件的綁定。至于判斷坐標是否在范圍內的算法 可以用射線法（考慮到線段可能會旋轉和縮放）來判定。

這個雖然我很想幫你，但我寫好的源碼在不久前把電腦硬盤摔壞后就沒了。我給你寫下基本思路吧： 1.首先設置范圍就看評論里的例子，四個頂點設好了我們基本上就有了活動的區間，至于區間范圍有多大看你個人需求。

2.“觀察者模式”（發布-訂閱者模式）可以網上搜一下基本代碼，其實很容易懂的。

3.至于旋轉后坐標的算法，點這里（注意這里是逆時針旋轉的公式），直接套用就好。

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

鏈接我都給你補好了，先慢慢學吧。看上去很煩，但懂了其實就很容易。