Ini adalah halaman HTML ringkas dengan 2 mata dan garis yang menghubungkan titik, ditambah menggunakan jQuery.

Hasilnya ialah garisan tidak mempunyai titik penghubung, tetapi diimbangi atas sebab tertentu.

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; }

Garis dan 2 mata mempunyaiposition:absolute;，因此top和left相对于容器。p>

marginJuga tetapkan semua 3 kepada sifar

Barisan atas ditetapkan ke atas titik1, tetapi garisan di atas titik1.

Kenapa ni?