随鼠标左键点击出现连续svg折线

最新推荐文章于 2024-05-26 16:06:03 发布

m0_69839414

最新推荐文章于 2024-05-26 16:06:03 发布

阅读量102

点赞数 2

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/m0_69839414/article/details/136895567

版权

组态项目中，要实现随鼠标左键点击出现连续svg折线，点鼠标右键结束当前折现的绘制。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg折线</title>
    <style>
        #svgCanvas {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
 <svg id="svgCanvas" width="800" height="600">
    </svg>
    <script>
        const svg = document.getElementById("svgCanvas");
        let isDrawing = false;
        let pathString = ''; //绘制路径
        let currentPath;
        let newPath = "";//路径标签
        let isOver = false;//是否点击了右键完成当前绘制
        let strench_Path = ""; //辅助路径标签
        let strench_currentPath;

        svg.addEventListener("mousedown", function (event) {
            if (event.button === 2) {
                // 右键点击结束当前路径绘制
                if (currentPath) {
                    isOver = true; //右键的话当前路径完结
                }
                isDrawing = false;
                return;
            }

            isDrawing = true;
            const { offsetX, offsetY } = event;

            // 初始化添加标签或当前绘制完成添加下一个标签
            if (pathString === '' || isOver) {
                newPath = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
                isOver = false;
                pathString = "";

            }

            pathString += `${offsetX},${offsetY} `;
            newPath.setAttribute("points", pathString);
            newPath.setAttribute("stroke", "black");
            newPath.setAttribute("fill", "none");
            currentPath = newPath;
            svg.appendChild(newPath);

           // 获取需要移除的元素
            var element = document.getElementById("assistPath");
            console.log("ele", element);
            if (element) {
                element.parentNode.removeChild(element);
            }
            // 创建辅助路径标签
            strench_Path = document.createElementNS("http://www.w3.org/2000/svg", "line");

            strench_Path.setAttribute("x1", offsetX);
            strench_Path.setAttribute("y1", offsetY);
            strench_Path.setAttribute("x2", offsetX);
            strench_Path.setAttribute("y2", offsetY);

            strench_Path.setAttribute("stroke", "#ffb27c");
            strench_Path.setAttribute("fill", "none");
            strench_Path.setAttribute("id", "assistPath");
            strench_currentPath = strench_Path;
            svg.appendChild(strench_Path);

        });

        svg.addEventListener("mousemove", function (event) {
            if (!isDrawing) return;

            if (strench_currentPath) {
                const { offsetX, offsetY } = event;

               strench_Path.setAttribute("x2", offsetX);
                strench_Path.setAttribute("y2", offsetY);
            }
        });

        svg.addEventListener("contextmenu", function (event) {
            event.preventDefault();
            // 右键点击后删除辅助标签
            var element = document.getElementById("assistPath"); // 获取需要移除的元素
            if (element) {
                element.parentNode.removeChild(element);
            }

            // 如果只有一对坐标点时，清除对应的路径标签
            if (pathString.trim().split(" ").length === 1) {
                if (newPath) {
                    svg.removeChild(newPath);
                }
                pathString = "";
                return;
            }
        });