使用jQuery在表格单元格间绘制箭头时位置上移的问题排查

问题原因 #

箭头偏移的核心原因是坐标计算基准错误：原代码使用选中单元格的offsetParent（即表格）作为坐标参考，但SVG是绝对定位在.container容器内的，两者的坐标基准不一致，导致Y轴位置计算出现偏差，箭头向上偏移。

修复步骤 #

修改drawCurve函数，将坐标基准统一为.container容器，重新计算曲线的起点和终点坐标：

function drawCurve(startElem, endElem) {
  // 获取SVG的容器（.container）作为坐标基准
  const containerOffset = $(".container").offset();
  
  const startOffset = startElem.offset();
  const endOffset = endElem.offset();

  const startWidth = startElem.outerWidth();
  const startHeight = startElem.outerHeight();
  const endWidth = endElem.outerWidth();
  const endHeight = endElem.outerHeight();

  // 计算相对于.container的坐标
  const startX = startOffset.left + startWidth - containerOffset.left;
  const startY = startOffset.top + startHeight / 2 - containerOffset.top;
  const endX = endOffset.left - containerOffset.left;
  const endY = endOffset.top + endHeight / 2 - containerOffset.top;

  const curvePath = 
    `M${startX},${startY} Q${(startX + endX) / 2},${startY} ${endX},${endY}`;
  return curvePath;
}

关键改动说明 #

• 替换坐标基准：从单元格的offsetParent改为.container，确保SVG的坐标系统和元素的相对位置匹配
• 简化计算逻辑：直接基于容器偏移量计算元素的相对坐标，避免多层嵌套的offsetParent导致的误差
• 保持曲线逻辑不变：贝塞尔曲线的控制点逻辑保留，仅修正坐标基准，确保箭头始终指向选中单元格的水平中心

额外优化（可选） #

为了确保窗口 resize 时箭头位置准确，可在updateCurve函数开头添加一行代码，确保SVG的尺寸和容器一致：

function updateCurve() {
  const $container = $(".container");
  $("#curve").closest("svg").css({
    width: $container.width(),
    height: $container.height()
  });
  
  // 原有逻辑...
}

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