При использовании Javascript SVG для рисования линии при перемещении мыши создается несколько <SVG>. Как мне убедиться, что остался только последний <SVG>? - PullRequest
Новая
       15

При использовании Javascript SVG для рисования линии при перемещении мыши создается несколько <SVG>. Как мне убедиться, что остался только последний <SVG>?

2 голосов
/ 19 июня 2020

Я пытаюсь написать программу, которая позволяет пользователям рисовать линию (используя SVG) между двумя точками. После выбора первой позиции (щелчком) пользователь затем перемещает мышь, которая dr aws линия, в конечном итоге они щелкнут еще раз, и новая строка должна установиться. Однако во время функции перемещения мыши рисуется много линий, вызывающих следующую проблему:

multiple svg tags as mouse moves

multiple svg tags as mouse moves2

Вместо Это происходит, мне нужно, чтобы существовал только последний тег 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>

1 Ответ

2 голосов
/ 19 июня 2020

Основная идея такова:

  1. вы создаете элемент svg только один раз, поэтому вы не помещаете его в функцию, которую вы вызываете много раз при перемещении мыши

  2. вы создаете линию при нажатии мыши. В этот момент линия будет иметь длину 0, поскольку x2 = x1 и y2 = y1. Если вы создадите линию при перемещении мыши, у вас будет много строк, поскольку событие mousemove запускается много раз, когда вы наводите указатель мыши на документ.
    Также при перемещении мыши я установил переменную drawing как true: да, я я рисую.

  3. при перемещении мыши вы сбрасываете значения для x2 и y2 * только 1015 * если drawing = true

  4. на мышь вверх 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...