So zeichnen Sie mit js und CSS eine Linie zwischen zwei Punkten

Question

Dies ist eine einfache HTML-Seite mit 2 Punkten und einer Linie, die die Punkte verbindet, hinzugefügt mit jQuery.

Das Ergebnis ist, dass die Linie keine Verbindungspunkte hat, aber aus irgendeinem Grund versetzt ist.

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>

Linie und 2 Punkte haben position:absolute;，因此 top 和 left 相对于容器。 p>

marginAußerdem alle 3 auf Null setzen

Der obere Rand der Linie ist auf den oberen Punkt von Punkt 1 eingestellt, aber die Linie liegt über Punkt 1.

Warum ist das so?

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>