Here is a simple HTML page containing 2 points and a line connecting the points, being added with jQuery.
The result is that the line is not connecting the points, but for some reason places the line with some offset.
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 the 2 points have position: absolute;, so that the top & left are relative to the container.
margin also set to zero for all 3
The line top is set to the point1 top, but the line is above point1.
Why is that?
The line rotates around the center, whereas you want it to rotate according to the origin point, which is top left in this instance, and probably all others as well. so need to add transform-origin: top left
function drawLine() {
const line_ = $("<div>", {
class: "line"
});
const p1 = $("#point1");
var p1T = p1.position().top;
var p1L = p1.position().left;
// set line top equal to point1 top
var lineT = p1T + "px";
line_.css({
width: length + "px",
transform: `rotate(${angle}rad)`,
"transform-origin": "top left",
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments