如何用js和CSS在兩點之間畫一條線

Question

這是一個簡單的 HTML 頁面，包含 2 個點和一條連接這些點的線，使用 jQuery 新增。

結果是線沒有連接點，但由於某種原因使線產生了一定的偏移。

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>

直線和 2 個點具有 position:absolute;，因此 top 和 left 相對於容器。 p>

margin 也將所有 3 個設定為零

#線頂部設定為 point1 頂部，但線位於 point1 之上。

這是為什麼？

Answer 1

該線繞著中心旋轉，而您希望它根據原點旋轉，在本例中原點是左上角#，也可能是所有其他點。所以需要加入 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>