使用JS与CSS绘制两点间连线时出现偏移的原因排查

问题场景 #

使用jQuery实现两个绝对定位的点之间的连线，线条的top设置为point1的top值，但线条却出现在point1上方，无法正确连接两点。

原始代码 #

HTML #

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

CSS #

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

JavaScript #

function drawLine(){
    const line_ = $("<div>", { class: "line" });
    const p1 = $("#point1");
    var p1T = p1.position().top;
    var p1L = p1.css("left");

    var lineT = p1T + "px";

    line_.css ({
        width: length + "px",
        transform: `rotate(${angle}rad)`,
        top: lineT,
        left: p1L
    });

    p1.parent().append(line_);
 }

const point1 = document.getElementById('point1');
const point2 = document.getElementById('point2');
 
const point1Rect = point1.getBoundingClientRect();
const point2Rect = point2.getBoundingClientRect();
 
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();

问题原因 #

1. Transform原点默认值导致偏移：CSS transform的默认原点是元素中心（50% 50%），线条旋转时会以自身中心为轴转动，导致起点偏离point1的位置。
2. 坐标体系不统一：getBoundingClientRect()获取的是元素相对于视口的坐标，而position().top是相对于父容器的坐标，两者混用会产生计算误差。
3. 垂直位置未对齐中心：线条高度为2px，直接设置top等于point1的top，会让线条顶部与point1顶部对齐，而非中心对齐，视觉上出现偏移。

修复方案 #

1. 统一坐标计算逻辑 #

改用相对于父容器的坐标进行计算，避免视口坐标干扰：

// 获取相对于父容器的位置
const p1Pos = $("#point1").position();
const p2Pos = $("#point2").position();

// 计算两点坐标差
const dx = p2Pos.left - p1Pos.left;
const dy = p2Pos.top - p1Pos.top;

// 计算长度和角度
const length = Math.sqrt(dx ** 2 + dy ** 2);
const angle = Math.atan2(dy, dx);

2. 调整Transform原点 #

给线条设置transform-origin: 0 50%，让旋转轴位于线条左端中心，确保旋转时起点固定在point1：

.line {
  position: absolute;
  height: 2px;
  background-color: aqua;
  margin: 0px;
  transform-origin: 0 50%; /* 旋转原点设为线条左端中心 */
}

3. 对齐垂直中心 #

计算线条top值时，让线条中心与point1中心对齐：

// point1中心垂直位置 = point1.top + point1高度/2 - 线条高度/2
const lineTop = p1Pos.top + (10 / 2) - (2 / 2);
const lineLeft = p1Pos.left;

完整修复后的JavaScript代码 #

function drawLine(length, angle, p1Pos){
    const line_ = $("<div>", { class: "line" });
    const lineTop = p1Pos.top + (10 / 2) - (2 / 2);
    const lineLeft = p1Pos.left;

    line_.css ({
        width: length + "px",
        transform: `rotate(${angle}rad)`,
        top: lineTop + "px",
        left: lineLeft + "px"
    });

    $("#line-container").append(line_);
 }

const p1Pos = $("#point1").position();
const p2Pos = $("#point2").position();

const dx = p2Pos.left - p1Pos.left;
const dy = p2Pos.top - p1Pos.top;
const length = Math.sqrt(dx ** 2 + dy ** 2);
const angle = Math.atan2(dy, dx);

drawLine(length, angle, p1Pos);

补充：容器高度 #

给#line-container添加高度，确保所有元素能在容器内显示：

#line-container {
  position: relative;
  border: 1px solid blue;
  height: 300px; /* 新增容器高度 */
}

内容的提问来源于stack exchange，提问作者OJNSim