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条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?
    • ¥15 乘性高斯噪声在深度学习网络中的应用
    • ¥15 运筹学排序问题中的在线排序
    • ¥15 关于docker部署flink集成hadoop的yarn,请教个问题 flink启动yarn-session.sh连不上hadoop,这个整了好几天一直不行,求帮忙看一下怎么解决
    • ¥30 求一段fortran代码用IVF编译运行的结果
    • ¥15 深度学习根据CNN网络模型,搭建BP模型并训练MNIST数据集
    • ¥15 C++ 头文件/宏冲突问题解决
    • ¥15 用comsol模拟大气湍流通过底部加热(温度不同)的腔体
    • ¥50 安卓adb backup备份子用户应用数据失败
    • ¥20 有人能用聚类分析帮我分析一下文本内容嘛