基于D3.js的Bezier曲线偏移距离计算及控制点问题咨询

一、dist的计算与取值 #

已知line1和cp1时计算dist #

如果这里的dist指line1到cp1的欧氏距离，直接用两点距离公式计算：

function getEuclideanDist(pointA, pointB) {
  return Math.sqrt(Math.pow(pointB.x - pointA.x, 2) + Math.pow(pointB.y - pointA.y, 2));
}
// 调用示例
const dist = getEuclideanDist(allPaths[0].l1, cp1);

使用pointFromLine生成控制点时的dist取值 #

这个dist是指沿基准线方向的偏移长度：

• 若要生成平滑的对称贝塞尔曲线，可将dist设为line1到line2线段长度的1/3左右；
• 若通过拖拽cp1反推cp2，可将dist设为line1到cp1的距离，保证两个控制点对称，让曲线过渡更自然。

二、自定义calculatePoint距离不符的排查 #

如果你的函数算出的d1、d2不等于设定的50，常见问题及修正：

• 检查是否正确实现欧氏距离公式，确保对坐标差的平方和开根号；
• 确认偏移方向计算是否正确，避免将相对坐标误当作绝对坐标；
• 核对参数传递是否错误，比如是否混淆了line1和line2的传入顺序。

以下是保证距离为设定值的控制点生成示例：

function calculatePoint(basePoint, angle, targetDist) {
  return {
    x: basePoint.x + targetDist * Math.cos(angle),
    y: basePoint.y + targetDist * Math.sin(angle)
  };
}
// 从line1出发，沿line1到line2的方向生成距离50的cp1
const lineAngle = Math.atan2(item.l2.y - allPaths[0].l1.y, item.l2.x - allPaths[0].l1.x);
const cp1 = calculatePoint(allPaths[0].l1, lineAngle, 50);

三、distance along与distance offset的概念及计算 #

• distance along：指目标点沿某条基准线（比如line1到line2的线段）的投影行进距离，计算方式如下：

  function getDistanceAlong(baseStart, baseEnd, targetPoint) {
    const baseVec = {x: baseEnd.x - baseStart.x, y: baseEnd.y - baseStart.y};
    const targetVec = {x: targetPoint.x - baseStart.x, y: targetPoint.y - baseStart.y};
    const dotProduct = baseVec.x * targetVec.x + baseVec.y * targetVec.y;
    return dotProduct / Math.sqrt(baseVec.x**2 + baseVec.y**2);
  }
  

• distance offset：指目标点到基准线的垂直距离，也就是点到直线的距离，计算方式如下：

  function getDistanceOffset(baseStart, baseEnd, targetPoint) {
    const numerator = Math.abs(
      (baseEnd.y - baseStart.y) * targetPoint.x - 
      (baseEnd.x - baseStart.x) * targetPoint.y + 
      baseEnd.x * baseStart.y - baseEnd.y * baseStart.x
    );
    const denominator = Math.sqrt(Math.pow(baseEnd.y - baseStart.y, 2) + Math.pow(baseEnd.x - baseStart.x, 2));
    return numerator / denominator;
  }
  

四、贝塞尔曲线平滑系数公式说明 #

你提到的公式(4/3)*tan(pi/8) = 4*(sqrt(2)-1)/3中并没有'n'，这个系数（约为0.55228）是用贝塞尔曲线模拟圆弧时的标准偏移系数。它的作用是：当你需要用贝塞尔曲线替代圆弧时，用这个系数乘以圆弧半径，得到控制点到圆弧端点的距离，能让曲线与圆弧的误差最小。

内容的提问来源于stack exchange，提问作者B L Praveen