javascript - 使用 Javascript SVG 画线时，鼠标移动时会生成多个 <SVG>。如何确保只剩下最后一个 <SVG> ？

我正在尝试编写一个程序，让用户在两点之间画一条线(使用 SVG)。在选择位置一(通过单击)后，用户然后移动绘制线条的鼠标，最终他们将再次单击并设置新线条。但是，在鼠标移动功能期间，绘制了许多线条，导致以下问题:

multiple svg tags as mouse moves

而不是这种情况发生，我只需要存在最后一个 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>

最佳答案

主要思想是这样的:

您只创建一次 svg 元素，因此您不会将其放入在鼠标移动时多次调用的函数中

您在鼠标按下时创建线。由于 x2=x1 和 y2=y1，此时该线的长度为 0。如果您在鼠标移动时创建行，您将有很多行，因为当您将鼠标移到文档上时会多次触发 mousemove 事件。同样在鼠标按下时，我设置变量 drawing真的:是的，我在画画。

在鼠标移动时，只有在 drawing = true 时才重置 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>

关于javascript - 使用 Javascript SVG 画线时，鼠标移动时会生成多个 <SVG>。如何确保只剩下最后一个 <SVG> ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62474769/

javascript - 使用 Javascript SVG 画线时，鼠标移动时会生成多个 <SVG>。如何确保只剩下最后一个 <SVG> ？

上一篇：c# - 如何使用 Puppeteer Sharp 上传文件？

下一篇：r - 利用回收将不同长度的列表转换为数据帧的功能