web_小灰 2017-06-13 07:27
浏览 3376
已结题

canvas图画中。怎么判断我鼠标点击的点是否在canvas图上,所画的线条中(图中画有多条线)?


 if(typeof(xiansu) != "undefined" && xiansu != null && xinhao.length > 1){
            //限速的线条------
            ctx.beginPath();                
            var x1=parseInt( (xiansu[0].GLB-M_qishi)*(Wmax/M_glb));  //根据公里标求值X的坐标点       上一个点(即是第一个点)    
            var y1=parseInt(1000-xiansu[0].XS_VALUE/100*h);     //根据限速值算出比例100km/h 在求其在y的坐标点      
            var x2,y2;
            for(var i=1;i<xiansu.length;i++){
                x2=parseInt( (xiansu[i].GLB-M_qishi)*(Wmax/M_glb));     //循环中找出的   下一个点         
                y2=parseInt(1000-xiansu[i].XS_VALUE/100*h); //循环中显示请求回来  根据比例算出的点Y值  
                ctx.moveTo(x1,y1);//开始的点
                ctx.lineTo(x2,y2);//结束的点
                x1=x2;
                y1=y2;
                //连线  下一个点对应等于上一个点(即下一个点等于上一个点的对应值  进行连线)
            };          
            ctx.strokeStyle="red";  //线条颜色
            ctx.stroke();
            ctx.closePath();
        }

        if(typeof(quxian) != "undefined" && quxian != null && quxian.length > 1){
            //标准曲线的线条-------------------------------------------              
            function SPEED(){//速度--------------------
                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();

               //var XXXX=[{x:x1 ,y:y1+5},{x:x1 ,y:y1-5},{x:x2 ,y:y2+5},{x:x2 ,y:y2-5},];
               //rayCasting({x:SU_x ,y:SU_y}, XXXX);                //调用函数 放入参数
}
//这是其中两条线的代码?
//我这里 其他代码不用管
 //其实就这几句;上面的x1=。。。。;这里是坐标点的算法 根据比例和数据算出这//组数据的点的坐标
//ctx.moveTo(x1,y1);
//ctx.lineTo(x2,y2);
//x1=x2;
//y1=y2;
//因为数据很多,连线只有说 在循环中 下一个点的X 等于上一个点的X ;下一个点的y等于上一个点的y;就把所有的数据连起来长就是一条折线了。
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥60 版本过低apk如何修改可以兼容新的安卓系统
    • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
    • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
    • ¥50 有数据,怎么用matlab求全要素生产率
    • ¥15 TI的insta-spin例程
    • ¥15 完成下列问题完成下列问题
    • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
    • ¥15 YoloV5 第三方库的版本对照问题
    • ¥15 请完成下列相关问题!
    • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?