svg.js svg鼠标点击绘制直线

女爷i 2023-06-07 10:40 17阅读 0赞

需求；鼠标点击下去后确定直线起始点，鼠标移动后直线会随之绵延，鼠标松开则直线绘制完成

源码：

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>动态添加图形和图片并可以拖拽</title>
        <meta content="width=device-width;initial-scale=1">
        <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="d3.min.js"></script>
        <script src="svg.min.js"></script>
        <script src="svg.draggable.js"></script>
    
        <style>
            #drawing {
                width: 100%;
                height: 500px;
                margin: 0;
            }
            [id^="Svgjs"] {
                cursor: move;
            }
            #img-btn{
                background: url("timg.jpg") no-repeat;
                border: none;
                background-size: 100% 100%;
                width: 100px;
                height: 40px;
            }
    
            #rect-btn{
                background-color:#f57518;
                width: 100px;
                height: 100px;
                border: none;
            }
            #Line-btn{
                background-color:pink;
                width: 100px;
                height: 100px;
                border: none;
            }
        </style>
    </head>
    
    <body>
    <div id="div1">
    
    </div>
    
    <svg id="svg_my" style="border:1px solid #000;width:500px;height:500px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    
    </svg>
    </body>
    <script>
    
        var Linename =1;
        var flag = true; //判断一个直线是否完成
        var startLinex1,startLiney1,startLinex2,startLiney2; //直线起始/点
        var svgMy = document.getElementById("svg_my")
    
    
        svgMy.οnmοusedοwn=function(event){
            startLinex1 = event.offsetX;
            startLiney1 = event.offsetY;
            startLinex2 = startLinex1;
            startLiney2=startLiney1;
            var e,draw = SVG('svg_my');
            draw.line(startLinex1,startLiney1, startLinex1, startLiney1).id("Imgline"+Linename).stroke({ width: 1 }).draggable();
            flag=true;
    
        }
    
        svgMy.onmousemove = function (event) {
            if(flag){
                startLinex2 = event.offsetX;
                startLiney2 = event.offsetY;
                $("#Imgline"+Linename).attr("x2",startLinex2).attr("y2",startLiney2);
            }
        }
    
        svgMy.onmouseup = function (e) {
            $("#Imgline"+Linename).attr("x2",startLinex2).attr("y2",startLiney2);
    
            flag=false;
            Linename++;
        }
    
    
    
    
    </script>
    </html>