当使用Javascript SVG绘制一条线时，随着鼠标移动会产生多个<SVG>元素，请问如何确保只有最后一个<SVG>元素保留？

Question

当使用Javascript SVG绘制一条线时，随着鼠标移动会产生多个<SVG>元素，请问如何确保只有最后一个<SVG>元素保留？

4

我正在努力编写一个程序，允许用户在两个点之间绘制一条线（使用SVG）。选择第一个位置后（通过单击），用户将移动鼠标以绘制线条，最终再次单击即可设置新的线条。然而，在鼠标移动函数过程中，会绘制出许多线条，导致以下问题：

鼠标移动时生成多个SVG标签

我需要的是只有最后一个SVG标签存在 - 有人知道我可以实时删除旧标签的方法吗？如果不能，请问是否有其他方法来解决这个问题？

const userPointsStartEnd = [{x: undefined, y: undefined},
    {x: undefined, y: undefined}];
let userPath = [];

function onMouseDown(event) {
    //Add code here
    // alert("clientX: " + event.clientX +" - clientY: " + event.clientY);


    if (userPointsStartEnd[0].x === undefined) {
        userPointsStartEnd[0].x = (event.clientX);
        userPointsStartEnd[0].y = (event.clientY);
        // alert(userPointsStartEnd[0].x);
    } else {
        userPointsStartEnd[1].x.push(event.clientX);
        userPointsStartEnd[1].y.push(event.clientY);

    }


}

function onMouseMove(event) {
    //Add code here
    let lineExist = false;
    if (userPointsStartEnd[0].x !== undefined) {


        const userLine = document.getElementById('content');
        // userPath = 'M' + userPointsStartEnd[0].x + ' ' + userPointsStartEnd[0].y + ' ' + 'L' + event.clientX + ' ' + event.clientY;
        //userPath += ' Z';
        // alert(event.clientX);
        //alert(userPath);

        let startX = '' + userPointsStartEnd[0].x;
        let startY = '' + userPointsStartEnd[0].y;


        var svgElement = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
        var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');

            svgElement.setAttribute('style', 'position: absolute;');
            //svgElement.setAttribute('fill-opacity', "0.2");
            svgElement.setAttribute('height', "1000");
            svgElement.setAttribute('width', "1000");
            newLine.setAttribute('id', 'line2');
            newLine.setAttribute('x1', startX);
            newLine.setAttribute('y1', startY);
            // newLine.setAttribute('x2', event.clientX);
            // newLine.setAttribute('y2', event.clientY);
        while(!lineExist) {
            newLine.setAttribute('x2', event.clientX);
            newLine.setAttribute('y2', event.clientY);
            lineExist=true;
        }
            newLine.setAttribute("stroke", "black")
            userLine.append(newLine);
            svgElement.appendChild(newLine);
            userLine.appendChild(svgElement);



    }


}

function onMouseUp(event) {
   
}

function setup() {
     document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mousedown', onMouseDown);
    document.addEventListener('mouseup', onMouseUp);
}


window.onload = () => setup()

<html>

    <script src="question.js"></script>
    
    <body>
        <div id="content" style="display:block; overflow:visible; position:absolute">
            <div id="userLine"style="display:block; overflow:visible">


            </div>

            
        </div>
        
    </body>


</html>

- Marcooz2007

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- enxaneta · Accepted Answer

主要思路如下：

只创建一次svg元素，不要将其放在每次鼠标移动时都调用的函数中。
在鼠标按下时创建线条。此时线条长度为0，因为x2=x1且y2=y1。如果在鼠标移动时创建线条，由于当鼠标在文档上移动时，mousemove事件会被多次触发，因此你将会得到许多线条。同时，在鼠标按下时，将变量drawing设置为true: 是的，我正在绘制。
只有当drawing为真时，才会在鼠标移动时重置x2和y2的值。
当鼠标抬起时，将drawing设置为false。

let svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElement.setAttribute("style", "position: absolute;");
svgElement.setAttribute("height", "1000");
svgElement.setAttribute("width", "1000");
const userLine = document.getElementById("userLine");
userLine.appendChild(svgElement);

let newLine;
let drawing = false;

function onMouseDown(event) {
  drawing = true;

  newLine = document.createElementNS("http://www.w3.org/2000/svg", "line");

  //newLine.setAttribute('id', 'line2');
  newLine.setAttribute("stroke", "black");
  newLine.setAttribute("x1", event.clientX);
  newLine.setAttribute("y1", event.clientY);
  newLine.setAttribute("x2", event.clientX);
  newLine.setAttribute("y2", event.clientY);

  svgElement.appendChild(newLine);
}

function onMouseMove(event) {
  //Add code here
  if (drawing) {
    newLine.setAttribute("x2", event.clientX);
    newLine.setAttribute("y2", event.clientY);
  }
}

function onMouseUp(event) {
  drawing = false;
}

function setup() {
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mousedown", onMouseDown);
  document.addEventListener("mouseup", onMouseUp);
}

window.onload = () => setup();

svg{background:#ccc}
body{margin:0;padding:0;}

<div id="content" style="display:block; overflow:visible; position:absolute">
  <div id="userLine" style="display:block; overflow:visible">

  </div>

</div>