This is a simple HTML page with 2 points and a line connecting the points, added using jQuery.
The result is that the line has no connecting points, but the line is offset for some reason.
function drawLine(){ const line_ = $("<div>", { class: "line" }); const p1 = $("#point1"); var p1T = p1.position().top; var p1L = p1.css("left"); // set line top equal to point1 top var lineT = p1T + "px"; line_.css ({ width: length + "px", transform: `rotate(${angle}rad)`, top: lineT, left: p1L }); p1.parent().append(line_); } // Get the elements representing the two points you want to draw a line between const point1 = document.getElementById('point1'); const point2 = document.getElementById('point2'); // Calculate the coordinates of the two points const point1Rect = point1.getBoundingClientRect(); const point2Rect = point2.getBoundingClientRect(); // Calculate the length and angle of the line const length = Math.sqrt((point2Rect.left - point1Rect.left) ** 2 + (point2Rect.top - point1Rect.top) ** 2); const angle = Math.atan2(point2Rect.top - point1Rect.top, point2Rect.left - point1Rect.left); drawLine();
#line-container { position: relative; border: 1px solid blue; } .line { position: absolute; height: 2px; background-color: aqua; margin: 0px; } .point{ position: absolute; margin: 0px; } #point1{ background-color: red; top: 100px; left: 100px; width: 10px; height: 10px; } #point2{ background-color: blue; top: 200px; left: 300px; width: 10px; height: 10px; }
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div id="line-container"> <div id="point1" class="point"></div> <div id="point2" class="point"></div> </div>
The line and 2 points have position:absolute;
, so top
and left
are relative to the container. p>
margin
Also set all 3 to zero
The line top is set to the point1 top, but the line is above point1.
why is that?
The line rotates around the center, and you want it to rotate based on the origin, which in this case is the
top left corner
, but could be any other point. So you need to addtransform-origin: top left