svg 折线实现地图点击画线标记

最新推荐文章于 2024-06-21 05:40:07 发布

神奇大叔

最新推荐文章于 2024-06-21 05:40:07 发布

阅读量1k

点赞数

分类专栏： svg 文章标签： svg

本文链接：https://blog.csdn.net/weixin_43294560/article/details/105031200

版权

svg 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

思路:
	将坐标转换成svg面板内的坐标
	鼠标按下获取坐标并生成圆标记->鼠标移动动态获取坐标并给折线,实现线随鼠标移动->设置右键点击事件取消绘图即取消之前两种事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:780px;
            height:400px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div style="border:solid 1px orange;" class='box'>

        <svg  id='svg' width='100%' height='100%'
        xmlns="http://www.w3.org/2000/svg">
 
        </svg>
        
        
    </div>

    <script>
window.onload=function(){

    //命名空间
    let svgNS="http://www.w3.org/2000/svg";

    //获取父级元素
    var div=document.querySelector('.box');
    //获取svg
    let svg=document.querySelector('#svg');

    //创建标签
    function createTag(tag,obj){
        var oTag=document.createElementNS(svgNS,tag);
        for(var attr in obj){
            oTag.setAttribute(attr,obj[attr]);
        }

        return oTag;

    }
    //创建折现
    var zx=createTag('polyline',{'stroke':'blue','fill':'none','stroke-width':'2'})
    var point='';
    var flag=0;

    //在svg面板按下事件
    svg.onmousedown=function(e){
        //创建折现
        var zx=createTag('polyline',{'stroke':'blue','fill':'none','stroke-width':'2'})
        
        //获取鼠标按下起始点坐标,相对于svg
        var x1=e.clientX-div.offsetLeft;
        var y1=e.clientY-div.offsetTop;

        if(point=='')
        {
            point=x1+','+y1;
        }else{
            point=point+','+x1+','+y1;
        }

        zx.setAttribute('points',point);

        //鼠标按下创建小圆点标记
        var circle=createTag('circle',{'cx':x1,'cy':y1,'r':'10','fill':'none','stroke':'red'})

        svg.appendChild(zx);
        svg.appendChild(circle);
        flag=1;
    }

        //在svg面板点击后移动,线段长度也跟着变化
        svg.onmousemove=function(e){
            if(flag==1){
                console.log(1);
                //获取鼠标移动时坐标,相对于svg
                var x2=e.clientX-div.offsetLeft;
                var y2=e.clientY-div.offsetTop;

                zx.setAttribute('points',point+','+x2+","+y2);

                svg.appendChild(zx);
            }
        }

        //设置右键点击取消绘图事件
        svg.oncontextmenu=function(){
            svg.onmousemove=null;
            svg.onmousedown=null;
            // return false;
        }
}


    </script>
</body>
</html>

神奇大叔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
svg 折线实现地图点击画线标记

思路: 将坐标转换成svg面板内的坐标鼠标按下获取坐标并生成圆标记->鼠标移动动态获取坐标并给折线,实现线随鼠标移动->设置右键点击事件取消绘图即取消之前两种事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name...
复制链接

扫一扫

专栏目录