这是一个简单的 HTML 页面，包含 2 个点和一条连接这些点的线，使用 jQuery 添加。
结果是线没有连接点，但由于某种原因使线产生了一定的偏移。
function drawLine(){ const line_ = $("", { 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; }
直线和 2 个点具有position:absolute;，因此top和left相对于容器。p>
margin也将所有 3 个设置为零
线顶部设置为 point1 顶部，但线位于 point1 之上。
这是为什么？
该线绕中心旋转，而您希望它根据原点旋转，在本例中原点是
左上角，也可能是所有其他点。所以需要添加transform-origin: top leftfunction drawLine() { const line_ = $("", { 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; }