問題描述

下面這是三段劃線的代碼，當(dāng)我自己進(jìn)入編輯模式后；我點(diǎn)擊鼠標(biāo)左鍵時(shí)，已經(jīng)記錄出左鍵在vcanvas里的相應(yīng)位置。我怎么判斷我點(diǎn)擊的點(diǎn)是否在我畫的線段上？

//這是劃線 關(guān)鍵代碼

ctx.beginPath();var x1=parseInt( (quxian[0].GLB-M_qishi)*(Wmax/M_glb));//速度第一個(gè)點(diǎn)的值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('第一個(gè)點(diǎn)：'+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); //牽引力需要負(fù)數(shù) 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));//鼠標(biāo)點(diǎn)擊canvas圖像里面的X位置；var y = parseInt( e.clientY - bbox.top * (canvas.height/bbox.height));//為什么不是直接e.clientY - bbox.top呢console.log('點(diǎn)擊時(shí)鼠標(biāo)的坐標(biāo)：'+x+'，'+y) //進(jìn)行判斷if(true){ //這里執(zhí)行在線上的事件}else{ return false; //這里執(zhí)行未選中的事件} //alert(context.isPointInPath(83365,708)); }; });

問題解答

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

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

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

3.至于旋轉(zhuǎn)后坐標(biāo)的算法，點(diǎn)這里（注意這里是逆時(shí)針旋轉(zhuǎn)的公式），直接套用就好。

4.射線法你可能需要用到 向量 來計(jì)算，請(qǐng)回憶下你的高中數(shù)學(xué)。

鏈接我都給你補(bǔ)好了，先慢慢學(xué)吧。看上去很煩，但懂了其實(shí)就很容易。