本文详解贝塞尔曲线中控制点（cp1/cp2）与端点连线之间的垂直偏移距离（offset distance）含义与计算方法，澄清 calculatePoint 与 pointFromLine 的本质区别，并提供可直接复用的代码实现与验证逻辑。
本文详解贝塞尔曲线中控制点（cp1/cp2）与端点连线之间的**垂直偏移距离**（offset distance）含义与计算方法，澄清 `calculatepoint` 与 `pointfromline` 的本质区别，并提供可直接复用的代码实现与验证逻辑。
在使用 D3.js 绘制三次贝塞尔曲线（bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y)）时，常需动态生成控制点以实现“弯曲效果”。一个典型需求是：让控制点 cp1 和 cp2 分别垂直偏离线段 line1→line2 的指定距离（如 50px），而非简单沿向量方向延伸。此时，关键在于理解两种距离语义的根本差异：
- ✅ 垂直偏移距离（Perpendicular Offset Distance）：指从线段上某一点出发，沿垂直于该线段的方向移动的固定长度。这是控制曲线“拱高”的核心参数，对应 pointFromLine(along, dist, p1, p2) 中的 dist 参数。
- ❌ 沿线段的距离（Arc-length Distance）：指从起点 p1 沿线段方向移动的总长度（即欧氏距离），对应 calculatePoint(a, b, distance) 中的 distance 参数——它无法保证控制点到线段的垂直距离为指定值。
正确计算垂直偏移控制点
应统一使用 pointFromLine 函数，并明确其参数含义：
// 让 cp1 垂直偏移 line1→line2 线段中点 50px（左侧）
const cp1 = pointFromLine(0.5, 50, item.l1, item.l2);
// 让 cp2 垂直偏移 line2→line1 线段中点 50px（右侧，注意 p1/p2 顺序决定法向方向）
const cp2 = pointFromLine(0.5, -50, item.l2, item.l1); // 负号反向
// 验证：cp1 到线段 l1→l2 的垂直距离是否 ≈ 50
const actualOffset = perpendicularDistanceToSegment(cp1, item.l1, item.l2);
console.log("实际垂直偏移:", Math.round(actualOffset)); // 应输出 50
其中 pointFromLine 实现如下（已优化鲁棒性）：
function pointFromLine(along, dist, p1, p2) {
const dx = p2.x - p1.x;
const dy = p2.y - p1.y;
const len = Math.sqrt(dx * dx + dy * dy);
if (len === 0) return { x: p1.x, y: p1.y };
// 单位切向量 (沿直线方向)
const ux = dx / len;
const uy = dy / len;
// 单位法向量（逆时针旋转90°，即 (-uy, ux)）
const nx = -uy;
const ny = ux;
// 线段上位置为 'along' 的点
const px = p1.x + ux * along * len;
const py = p1.y + uy * along * len;
// 垂直偏移 dist
return {
x: px + nx * dist,
y: py + ny * dist
};
}
⚠️ 注意：along ∈ [0,1] 表示在线段 p1→p2 上的比例位置（0=起点，1=终点）；dist 符号决定偏移方向（正：左/逆时针侧，负：右/顺时针侧）。
验证垂直距离的辅助函数
为确保计算准确，建议用标准点到线段距离公式验证：
function perpendicularDistanceToSegment(point, segStart, segEnd) {
const A = point.x - segStart.x;
const B = point.y - segStart.y;
const C = segEnd.x - segStart.x;
const D = segEnd.y - segStart.y;
const dot = A * C + B * D;
const lenSq = C * C + D * D;
let param = -1;
if (lenSq !== 0) param = dot / lenSq;
let xx, yy;
if (param 1) {
xx = segEnd.x;
yy = segEnd.y;
} else {
xx = segStart.x + param * C;
yy = segStart.y + param * D;
}
const dx = point.x - xx;
const dy = point.y - yy;
return Math.sqrt(dx * dx + dy * dy);
}
关键总结
- 控制贝塞尔曲线弯曲程度的核心参数是垂直偏移距离（dist in pointFromLine），而非沿线段的距离；
- calculatePoint 仅适用于生成线段上的投影点，不满足垂直偏移需求；
- bezierCurveTo 不经过 cp1/cp2，因此 cp1 到 line1 的欧氏距离 ≠ 垂直偏移距离——这是正常现象，无需校正；
- 实际应用中，推荐始终使用 pointFromLine 并通过 perpendicularDistanceToSegment 验证结果，确保视觉一致性与数学准确性。
