javascript - 鼠标在Canvas页面点击，怎么确定点的位置是否在其中画的线上？在画的线上事触发事件？

问题描述

下面这是三段划线的代码，当我自己进入编辑模式后；我点击鼠标左键时，已经记录出左键在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.射线法你可能需要用到 向量 来计算，请回忆下你的高中数学。

链接我都给你补好了，先慢慢学吧。看上去很烦，但懂了其实就很容易。