CODEWITHSUNDEEP
javascriptcsshtml
user6972
user6972

Reputation: 911

HTML and SVG how to move only one endpoint of a line with mouse click?

I've been trying to figure out a way to move just one end of a line, but it keep changing the container and thus redrawing the entire line and moving it.

Here's a js fiddle: https://jsfiddle.net/h2nwygu8/1/

<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Review Race</title>
  </head>

  <body>
    <div class="wrapper">
      <section>
        <h1>Line Test</h1>
        <div id="canvas" style="width: 960px; height:410px; border: 4px solid lime;">
          <svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute; top:95px; width:960px; height:410px;">
                    <line id="start_line" x1="10" y1="0" x2="10" y2="960" style="stroke:rgb(255,0,0);stroke-width:3;" />
                    </svg>
        </div>
      </section>
    </div>
  </body>

</html>

and javascript:

function placeLine(e) {
  var d = document.getElementById('start_line');

  posY = e.clientY;
  posX = e.clientX;
  d.setAttribute("y1", posY)
  d.setAttribute("x1", posX)
}

document.addEventListener("click", placeLine);

what I would like to do is have the top of the red line move around over the green box to the mouse x,y position. The bottom of the line should not move. However with each click the containers are changing and moving the entire line. You can also see there are a few issues with the offsets with the mouse x,y and the line. The only restriction is that the line needs to be able to layer over the top of the container with the green boundary.

What's the best way to do this? Thanks.

Upvotes: 0

Views: 765

Answers (1)

Mark L.
Mark L.

Reputation: 28

You've mixed up the height and width with regards to the x2 and y2 properties. It should start working more like you expect if you change y2 to be equal to your height (410px).

See: https://jsfiddle.net/zukrtpyg/.

HTML:

<div id="canvas" style="width: 960px; height:410px; border: 4px solid lime;">
   <svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:960px; height:410px;">
       <line id="start_line" x1="0" y1="0" x2="0" y2="410" style="stroke:rgb(255,0,0);stroke-width:3;" />
   </svg>
</div>

Javascript:

function placeLine(e) {
  var d = document.getElementById('start_line');

  posY = e.offsetY;
  posX = e.offsetX;
  d.setAttribute("y1", posY)
  d.setAttribute("x1", posX)
}

document.getElementById('canvas').addEventListener("click", placeLine);

I've also removed the top and position declarations on the canvas element, these were causing the line to extend past the green border on the bottom.

Lastly, I've changed the click listener to be on the canvas element, that way you can use the events' offsetX and offsetY to position the line in relation to the canvas element, which is what the path coordinates are mapped to in the first place.

Using the clientX and clientY positions tries to place it in relation to the page, which doesn't map up with the position you want it to be on the canvas.

You can actually still use the clientX and clientY positions, you just have to compensate with the x and y position of the canvas element in relation to the page. You can find these out using Element.getBoundingClientRect(). See https://jsfiddle.net/th0aLcx0/ for an example.

Upvotes: 1

Related Questions