使用 Javascript SVG 画线时，多个<svg>是在鼠标移动时生成的。我如何确保只有最后一个<svg>遗迹？</svg></svg>

Question

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

鼠标移动时有多个 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>

Answer 1

主要思想是这样的：

您只创建一次 svg 元素，因此您不会将其放入您在鼠标移动时多次调用的 function 中
您在鼠标按下时创建线。 由于 x2=x1 和 y2=y1，此时该线的长度为 0。 如果您在鼠标移动时创建行，您将有很多行，因为当您将鼠标移到文档上时会多次触发 mousemove 事件。
同样在鼠标按下时，我将变量drawing设置为 true：是的，我正在绘图。
在鼠标移动时，只有在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 SVG 画线时，多个<svg>是在鼠标移动时生成的。我如何确保只有最后一个<svg>遗迹？</svg></svg>

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-06-19 17:06:33

使用 Javascript SVG 画线时，多个<svg>是在鼠标移动时生成的。 我如何确保只有最后一个<svg>遗迹？</svg></svg>

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-06-19 17:06:33

使用 Javascript SVG 画线时，多个<svg>是在鼠标移动时生成的。我如何确保只有最后一个<svg>遗迹？</svg></svg>

解决方案1
2 已采纳 2020-06-19 17:06:33