做可视化项目时最常用的连接线绘制方式就是二阶贝塞尔曲线。不管是流程图、拓扑图、还是拖拽连线二次贝塞尔曲线几乎能覆盖绝大多数“两点之间画一条平滑曲线”的需求。我最早接触它是在做一个类似脑图的编辑工具节点之间有大量连线起初我直接用直线后来改成一阶直线加箭头怎么看都像电路板走线直到换成二阶贝塞尔曲线整体观感才真正像个“产品”。这篇内容会从原理、控制点选择、Canvas/SVG实现、性能优化和典型坑位几个方面把我实际项目中验证过的做法整理出来。它适合谁看如果你正在做流程编辑器、拓扑可视化、low-code 平台、或者任何需要在界面里动态连线的功能这篇文章可以直接“抄作业”。即使你不用 Canvas思路和公式也完全适用于 SVG、WebGL甚至游戏里的 UI 导线。看完后你至少能解决三件事控制点到底怎么取曲线怎么控制弯向以及如何避免曲线绕路。1. 内容整体设计与思路拆解1.1 为什么两点之间的连线要用二阶贝塞尔曲线先明确一个场景起点 P0 和终点 P2 固定你需要在它们之间画一条“好看”的线。直线最简单但僵硬而且当线和节点重叠时视觉层次非常差。三阶贝塞尔曲线能拧出 S 形和复杂弯曲但它有两个控制点参数调整不好容易画成奇奇怪怪的一团线调试成本高。二阶贝塞尔曲线处在两者之间的甜点区它只需要一个控制点 P1数学简单、计算开销小同时又能制造自然的弧度。用生活里的话说二阶曲线像一根被手指从中间轻轻拨动的绳子只有“一个弯”方向可控韧性可控。绝大多数连线场景例如流程图、组织架构图、知识图谱、节点编辑器需要的恰恰就是这种“一个弯”的效果。从我自己的项目经验看快速原型阶段用二阶曲线几乎不会出错原因有三个控制点只有 1 个心智负担轻调参时能直观知道“上移控制点曲线就更弯”。公式是纯初等运算没有递归和矩阵求逆渲染大量曲线时性能极其友好。曲线的凸包性质保证它不会离谱地飞到两个端点的“外侧”太远形状天然可控。当然它也有明显边界如果两点之间有障碍物需要 S 形绕行单条二阶曲线做不到。这个我在后面“常见问题”里详细讲。1.2 二阶贝塞尔曲线的数学原理与直觉二阶贝塞尔曲线在参数 t 上的表达式是P(t) (1 - t)^2 * P0 2 * (1 - t) * t * P1 t^2 * P2其中 t 从 0 到 1 连续变化。当 t 0 时 P 在起点 P0当 t 1 时 P 在终点 P2t 在中间时会逐渐靠近 P1 再离开形成一条平滑的曲线。这个公式如果你第一次见可以拆成两次线性插值来理解。先在 P0 到 P1 之间取一点 A在 P1 到 P2 之间取一点 BA 和 B 都在参数 t 处A (1 - t) * P0 t * P1 B (1 - t) * P1 t * P2然后让 A 到 B 之间再做一次相同比例的线性插值P (1 - t) * A t * B把 A 和 B 的表达式代进去展开正好就是二阶贝塞尔公式。这就是“二次”这个名字的由来整个表达式对 t 的最高次数是 2。几何上曲线就是这三条线段在逐步“拉线”过程中留下的轨迹计算机图形学里也叫“德卡斯特里奥构造法”的特例。在实际代码中如果把 P0、P1、P2 分别拆成 x 和 y 坐标两个分量互不干扰所以公式也能写成x(t) (1 - t)^2 * x0 2 * (1 - t) * t * x1 t^2 * x2 y(t) (1 - t)^2 * y0 2 * (1 - t) * t * y1 t^2 * y2另一个很重要的性质是曲线一定落在 P0、P1、P2 三个点形成的凸包三角形内。也就是说控制点放在哪里曲线就会在它附近拐弯但永远不会超出“三角形”边界。这给了我们极大的安全感调控制点时不需要担心曲线飞出画布。1.3 画连线前先想清楚你的需求我见过很多同事直接套公式结果画出的曲线方向怪怪的。问题往往不在公式而在没定义清楚“你要这条线表达什么”。如果只是两个节点之间画装饰性连线控制点可以直接取中点加一个垂直方向的固定偏移。如果是流程图的“有向”连线并且需要表示数据从 A 流向 B那么曲线最好能体现“从 A 的出口出来经过一段路径进入到 B 的入口”这时控制点的确定需要参考 A 和 B 的朝向而不是简单的中点偏移。如果是树状图里的父子节点连线通常希望曲线像“括号”一样先向上走再落到子节点这时控制点的位置又完全不同。还有一个容易被忽略的点连线两端是否带箭头如果带箭头曲线末端的切线方向就是 t 1 时的一阶导数方向你需要用这个方向来旋转箭头否则箭头会歪。计算方式也不复杂对 P(t) 求导得到P(t) 2 * (1 - t) * (P1 - P0) 2 * t * (P2 - P1)在 Canvas 里画箭头时我就用这个公式算出终点切线向量再旋转到箭头形状。这个细节很多教程不提但实际项目里作用很大。2. 核心细节解析与实操要点2.1 控制点选择的三种常用策略控制点是二阶贝塞尔曲线的灵魂。同一个起点和终点控制点位置不同画出来的曲线视觉差异巨大。我整理了三种我实际用过的策略按适用场景分类。第一种固定垂直偏移法这是最通用的做法。先算出两个端点的中点 MM ((x0 x2) / 2, (y0 y2) / 2)然后找出从 P0 到 P2 的垂直方向向量。对于二维坐标垂直方向只有两个一个向左旋转 90 度一个向右旋转 90 度。假设方向向量 D P2 - P0那么它的一个垂直向量是 N (-D.y, D.x)。控制点就是P1 M N * k其中 k 是偏移量。k 的绝对值控制弯曲程度正负号控制弯曲方向。偏移量可以是固定像素但更好的做法是让它跟两点距离成比例例如 k 距离 * 0.25。这样不管两个节点是远是近曲线弧度看起来都足够匀称。第二种固定角度法在某些需要“层级感”的场景比如组织结构图我们不希望曲线乱弯而是希望它先从当前节点垂直向上走一段再水平拐到目标节点附近。这时可以让控制点落在“从起点出发、沿着某个角度延伸”的方向上。例如希望曲线从起点沿竖直方向往上“弹”出去控制点就是P1 (x0 (x2 - x0) * 0.5, y0 - offset)这个做法直观调起来也简单。缺点是当目标节点位于起点左上方时这条曲线可能像绕了一个大圈。第三种按节点朝向偏移法节点编辑器、流程图工具最常用。每个节点通常知道自己有哪些“输出锚点”和“输入锚点”例如输出锚点在右侧输入锚点在左侧。连接线发出端应该沿输出锚点的方向延伸一段距离再转向终点进入端也应该从目标方向反推一段距离。这样曲线会很自然地从“出口”流出流进“入口”。具体实现是P1 不再用中点垂直偏移而是取两个端点的“方向点”再平均P1 P0 的方向延长点 L0 与 P2 的反方向延长点 L1 的中点L0 P0 方向0 * 距离 L1 P2 方向1 * 距离其中方向0 是输出锚点方向方向1 是输入锚点方向的反方向因为要从 P2 的反方向“靠近”。这样得到的曲线整体更贴合布局比全局统一偏移更有设计感代价是要给每个节点维护锚点方向的数据结构。2.2 向量运算基础与坐标计算如果你已经熟悉向量运算可以直接跳过这段。但很多新手第一次写下面的代码时容易把垂直向量求反所以我单独讲一下。两点向量D P2 - P0也就是 D.x x2 - x0D.y y2 - y0。单位向量把 D 除以它的长度 len。len Math.hypot(D.x, D.y)。当 len 为 0 时要特别处理。垂直向量逆时针旋转 90 度得到 (-D.y, D.x)顺时针旋转 90 度得到 (D.y, -D.x)。画布坐标系里 y 轴向下你可能需要反复试一下哪个是“向上”哪个是“向下”记住一个原则即可采样代入公式看结果不要靠脑补。中点M (P0 P2) / 2也就是 M.x (x0 x2) / 2M.y (y0 y2) / 2。有了这些基础控制点计算完全可以封装成几个纯函数方便测试和复用。我通常会在代码里维护一个Vec2辅助对象或者直接用一个包含 x/y 的普通对象没必要引入额外库。坐标计算不依赖框架纯 JS 就好。2.3 如何控制曲线的弯曲方向和弯曲程度弯曲方向本质上由控制点 P1 相对中点 M 的位置决定。Canvas 坐标系中 y 轴向下这就导致一个反直觉的现象想让曲线朝“上”弯控制点的 y 坐标反而要小于中点 y想让曲线朝“下”弯控制点 y 坐标要比中点 y 大。为了让方向判断不出错我建议在开发时直接在控制台打几个采样点看曲线初始的方向。例如P0 在 (100, 100)P2 在 (300, 100)中点 M 是 (200, 100)。此时如果我把控制点放到 (200, 50)也就是中点的正上方那曲线会像一个桥洞一样向上拱起。如果放到 (200, 150)曲线就向下凹。这是最容易理解的例子。弯曲程度则由控制点到中点的距离控制。偏移量越大曲线越“鼓”。我在项目里一般把偏移系数控制在 0.2 到 0.5 之间小于 0.2 时曲线太直几乎没有存在感大于 0.5 时曲线可能会超出很多人的审美范围而且当两个节点距离很近时会显得异常突兀。3. 实操过程与核心环节实现3.1 用 Canvas 实现完整的“两点连线”组件先说最直接的方式用 Canvas 2D 的quadraticCurveTo它能直接用二阶贝塞尔曲线绘制路径底层已经帮你处理好了公式不需要手动采样。核心代码很简洁function drawBezierLine(ctx, p0, p2, bend 0.25) { const mx (p0.x p2.x) / 2; const my (p0.y p2.y) / 2; const dx p2.x - p0.x; const dy p2.y - p0.y; const distance Math.hypot(dx, dy); if (distance 1e-6) { // 两点重合直接画点或不做处理 return; } // 垂直向量这里选逆时针旋转90度的方向 const nx -dy / distance; const ny dx / distance; const p1 { x: mx nx * distance * bend, y: my ny * distance * bend, }; ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.quadraticCurveTo(p1.x, p1.y, p2.x, p2.y); ctx.stroke(); }bend就是弯曲系数。我习惯传 0.25效果比较克制。如果你想画“向上弯”还是“向下弯”可以传符号例如bend -0.25就是反方向。如果不用quadraticCurveTo你也可以直接采样手动生成折线点这在 WebGL 或导出图片时比较有用function sampleQuadratic(p0, p1, p2, count 50) { const points []; for (let i 0; i count; i) { const t i / count; const mt 1 - t; const x mt * mt * p0.x 2 * mt * t * p1.x t * t * p2.x; const y mt * mt * p0.y 2 * mt * t * p1.y t * t * p2.y; points.push({ x, y }); } return points; }采样点数 30 到 100 之间视觉上基本没有区别性能开销也极低。手动采样的好处是可以对点做后续处理比如拖动过程中二次编辑、物理碰撞、避免遮挡等。3.2 使用 SVG 的实现方式SVG 和 Canvas 在画这条曲线上的思路是一样的只不过把公式交给了浏览器解析。path dM 100 100 Q 200 50 300 100 fillnone stroke#333 stroke-width2 /M是起点Q后面跟着控制点和终点。如果用 JS 动态生成就是字符串拼接const path document.createElementNS(http://www.w3.org/2000/svg, path); const mx (p0.x p2.x) / 2; const my (p0.y p2.y) / 2; const dx p2.x - p0.x; const dy p2.y - p0.y; const dist Math.hypot(dx, dy); const p1 { x: mx (-dy / dist) * dist * bend, y: my (dx / dist) * dist * bend, }; path.setAttribute(d, M ${p0.x} ${p0.y} Q ${p1.x} ${p1.y} ${p2.x} ${p2.y}); svg.appendChild(path);SVG 方案的好处是每条线都是独立 DOM 节点方便绑定事件、做动画、单独修改样式。缺点是节点特别多时 DOM 数量会拖慢页面此时 Canvas 明显更快。3.3 动态拖拽场景下的实时重绘如果节点可以拖动连线要跟着变。我通常用一个 state 管理所有节点和连线每次拖拽触发update然后重绘画布。简化版逻辑let pointA { x: 150, y: 150 }; let pointB { x: 400, y: 260 }; let dragging null; canvas.addEventListener(pointerdown, (e) { const pos getPos(e); if (isClose(pos, pointA)) dragging A; else if (isClose(pos, pointB)) dragging B; }); canvas.addEventListener(pointermove, (e) { if (!dragging) return; const pos getPos(e); if (dragging A) pointA pos; if (dragging B) pointB pos; redraw(); }); canvas.addEventListener(pointerup, () { dragging null; }); function redraw() { ctx.clearRect(0, 0, width, height); drawNodes(); drawBezierLine(ctx, pointA, pointB, 0.3); }这里有一个细节pointermove在拖拽过程中会高频触发每一次都重新clearRect和重绘所有节点简单场景没问题如果节点和连线非常多就建议用requestAnimationFrame合并绘制。你可以在事件回调里只更新坐标把真正的绘制放到 rAF 中避免连续鼠标事件把渲染队列塞满。3.4 大量连线的性能与渲染优化当你画了几百甚至上千条二阶贝塞尔曲线时性能瓶颈多半不在贝塞尔计算而在绘制调用次数和路径重建上。Canvas 的路径对象如果反复构建GC 压力会变大我这里有一个实测可用的优化方法预先创建Path2D对象并缓存。const pathCache new Map(); function getCachedPath(id, p0, p2, bend) { let path pathCache.get(id); if (!path) { path new Path2D(); // 计算控制点... const cx ...; const cy ...; path.moveTo(p0.x, p0.y); path.quadraticCurveTo(cx, cy, p2.x, p2.y); pathCache.set(id, path); } return path; }前提是线和节点没有频繁移动。如果节点位置会变化缓存命中率低那就别缓存老老实实每次重建路径然后把strokeStyle之类的样式设置放在绘制循环外面否则 Canvas 会不停地切换状态这个开销往往比画曲线本身还大。另一个思路是用离屏 Canvas 先把固定不变的连线层画好拖拽时只把动态连线画在顶层。这个方案做节点编辑器时非常香静态节点和背景不需要每次重画帧率能明显上去。4. 常见问题与排查技巧实录4.1 曲线弯的方向“反了”或“绕路”这是新手最容易踩的坑。我最初调 Canvas 连线时希望线条从起点往右下方延伸结果控制点公式算出来曲线总是往左上拱看起来像背道而驰。原因很简单坐标系 y 轴正方向是向下你脑中默认“上方是正方向”但代码里 y 越小越靠上。解决方式有两种要么统一用“垂直向量直接改成顺时针旋转”的那一套要么保留公式但记住符号的影响。我给的排查方法很笨但很快画一条从 (100, 100) 到 (300, 100) 的线然后分别尝试p1.y 50、p1.y 150看哪一种符合你的预期再确定偏移系数符号。一旦确认把这个符号写成常量不要到处手写正负号。4.2 两个端点重合或距离过近时曲线异常当起点和终点距离非常近时垂直向量计算里的除法会出现问题distance趋向 0控制点会被推到极远的位置曲线狰狞。处理方式有两条路距离小于某个阈值例如 5px时直接不画曲线或者画一条直线。给偏移量设一个最小绝对值例如bendDistance Math.max(distance * bend, 20)保证控制点不会变成无法收敛的数学异常。这类边界情况在编辑器里很常见因为用户完全可能把两个节点叠在一起。你必须在渲染函数里做防御性判断而不是依赖上层逻辑保证节点不重合。4.3 曲线穿过自己的节点或被文字遮挡节点连线时如果你把起点 P0 直接用节点中心坐标曲线很可能从节点中心“穿膛而过”视觉上非常糟糕。解决方案是引入“锚点”概念连线的起点不是节点中心而是节点边框与出口方向的交点。简单做法是取节点中心沿出口方向偏移一个半径 r得到P0终点同样从目标节点的中心沿入口反方向偏移。这样曲线只会从边框边缘开始到另一个边框边缘结束看起来就是连接在“边缘”上。偏移量 r 可以设成节点宽度的一半或者固定 8px具体看节点形状。如果是圆角矩形建议稍微比理论半径小一点否则线头和边框之间会有一条若隐若现的缝。4.4 二阶贝塞尔曲线表达不了 S 形路径我遇到过这样的需求两个节点之间有一堆别的元素连线希望从左边绕开障碍像一个“几”字型。这种用单条二阶贝塞尔曲线做不出因为二阶曲线只有一个控制点几何上只能产生一个“弯折趋势”无法形成两个转弯。解决方案是用两条二阶贝塞尔曲线拼接中间加一个过渡点。例如从 P0 连到 M再从 M 连到 P2两条曲线在 M 处自然衔接。直接改用三阶贝塞尔曲线用两个控制点在两端各“拧”出需要的方向。第二种更省事。三阶公式P(t) (1-t)^3 * P0 3*(1-t)^2t * C1 3(1-t)*t^2 * C2 t^3 * P2控制点 C1、C2 分别控制起点和终点的切线方向。你可以把 C1 放在 P0 右侧C2 放在 P2 左侧曲线就会先向右拐再向左拐形成 S 形。整体还是受凸包性质约束不会乱飞。但对于绝大多数“两个节点之间一条连接线”的产品需求二阶够了。我一般不会为了极小概率的绕行需求一开始就上三阶而是先用二阶把整体跑通需要 S 形的地方再局部切到三阶。4.5 曲线模糊或高清屏下线条发虚Canvas 在高 DPI 屏幕上默认会按 CSS 尺寸进行像素映射导致曲线发虚。标准做法是读取devicePixelRatio把 Canvas 的物理像素尺寸放大再通过ctx.scale(ratio, ratio)把坐标系还原到逻辑像素。const dpr window.devicePixelRatio || 1; canvas.width width * dpr; canvas.height height * dpr; canvas.style.width width px; canvas.style.height height px; ctx.scale(dpr, dpr);SVG 是矢量渲染没有这个问题。所以如果项目对清晰度要求苛刻且连线数量不多直接用 SVG 更省心。4.6 大量连线时页面卡顿的排查思路遇到卡顿先别急着优化贝塞尔计算。先打开 Performance 面板看是脚本执行时间长还是绘制时间长。我遇到过的最常见瓶颈出现在几个地方每次 draw 都重新设置strokeStyle、lineWidth导致 Canvas 状态频繁切换。用大量 DOM 节点表示连线并频繁更新d属性。拖拽事件回调里直接同步重绘没有做节流或 rAF 合并。节点和连线混在同一个数组里每次都做排序或过滤。贝塞尔公式本身在 t0 到 1 区间只是四次乘法加法级别的计算性能开销很小。真正的开销来自于不必要的全局重绘和状态切换。优化的顺序是先砍重复绘制再减少路径重建最后实在不行才考虑 WebGL 或离屏 Canvas。最后分享一个调试技巧在我自己画这类连线时最常用的小技巧是临时把控制点也画出来。用一个小圆圈标记 P1再把 P0 到 P1、P1 到 P2 用半透明直线连起来。这样你能立刻看出曲线为什么这么弯、方向为什么不对比闭着眼调参数快得多。调试代码可以这样加// 调试用画控制点和辅助线 ctx.save(); ctx.globalAlpha 0.3; ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.lineTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); ctx.globalAlpha 1; ctx.beginPath(); ctx.arc(p1.x, p1.y, 4, 0, Math.PI * 2); ctx.fillStyle red; ctx.fill(); ctx.restore();这个习惯帮我省了很多排查时间。等曲线形状确定后再把这个调试块删掉或放到一个debug开关下面就行。项目上线后如果用户反馈连线不好看你也可以直接打开这个开关截图排查比让用户描述“线歪了”要高效很多。
二阶贝塞尔曲线在可视化连线中的实战指南
做可视化项目时最常用的连接线绘制方式就是二阶贝塞尔曲线。不管是流程图、拓扑图、还是拖拽连线二次贝塞尔曲线几乎能覆盖绝大多数“两点之间画一条平滑曲线”的需求。我最早接触它是在做一个类似脑图的编辑工具节点之间有大量连线起初我直接用直线后来改成一阶直线加箭头怎么看都像电路板走线直到换成二阶贝塞尔曲线整体观感才真正像个“产品”。这篇内容会从原理、控制点选择、Canvas/SVG实现、性能优化和典型坑位几个方面把我实际项目中验证过的做法整理出来。它适合谁看如果你正在做流程编辑器、拓扑可视化、low-code 平台、或者任何需要在界面里动态连线的功能这篇文章可以直接“抄作业”。即使你不用 Canvas思路和公式也完全适用于 SVG、WebGL甚至游戏里的 UI 导线。看完后你至少能解决三件事控制点到底怎么取曲线怎么控制弯向以及如何避免曲线绕路。1. 内容整体设计与思路拆解1.1 为什么两点之间的连线要用二阶贝塞尔曲线先明确一个场景起点 P0 和终点 P2 固定你需要在它们之间画一条“好看”的线。直线最简单但僵硬而且当线和节点重叠时视觉层次非常差。三阶贝塞尔曲线能拧出 S 形和复杂弯曲但它有两个控制点参数调整不好容易画成奇奇怪怪的一团线调试成本高。二阶贝塞尔曲线处在两者之间的甜点区它只需要一个控制点 P1数学简单、计算开销小同时又能制造自然的弧度。用生活里的话说二阶曲线像一根被手指从中间轻轻拨动的绳子只有“一个弯”方向可控韧性可控。绝大多数连线场景例如流程图、组织架构图、知识图谱、节点编辑器需要的恰恰就是这种“一个弯”的效果。从我自己的项目经验看快速原型阶段用二阶曲线几乎不会出错原因有三个控制点只有 1 个心智负担轻调参时能直观知道“上移控制点曲线就更弯”。公式是纯初等运算没有递归和矩阵求逆渲染大量曲线时性能极其友好。曲线的凸包性质保证它不会离谱地飞到两个端点的“外侧”太远形状天然可控。当然它也有明显边界如果两点之间有障碍物需要 S 形绕行单条二阶曲线做不到。这个我在后面“常见问题”里详细讲。1.2 二阶贝塞尔曲线的数学原理与直觉二阶贝塞尔曲线在参数 t 上的表达式是P(t) (1 - t)^2 * P0 2 * (1 - t) * t * P1 t^2 * P2其中 t 从 0 到 1 连续变化。当 t 0 时 P 在起点 P0当 t 1 时 P 在终点 P2t 在中间时会逐渐靠近 P1 再离开形成一条平滑的曲线。这个公式如果你第一次见可以拆成两次线性插值来理解。先在 P0 到 P1 之间取一点 A在 P1 到 P2 之间取一点 BA 和 B 都在参数 t 处A (1 - t) * P0 t * P1 B (1 - t) * P1 t * P2然后让 A 到 B 之间再做一次相同比例的线性插值P (1 - t) * A t * B把 A 和 B 的表达式代进去展开正好就是二阶贝塞尔公式。这就是“二次”这个名字的由来整个表达式对 t 的最高次数是 2。几何上曲线就是这三条线段在逐步“拉线”过程中留下的轨迹计算机图形学里也叫“德卡斯特里奥构造法”的特例。在实际代码中如果把 P0、P1、P2 分别拆成 x 和 y 坐标两个分量互不干扰所以公式也能写成x(t) (1 - t)^2 * x0 2 * (1 - t) * t * x1 t^2 * x2 y(t) (1 - t)^2 * y0 2 * (1 - t) * t * y1 t^2 * y2另一个很重要的性质是曲线一定落在 P0、P1、P2 三个点形成的凸包三角形内。也就是说控制点放在哪里曲线就会在它附近拐弯但永远不会超出“三角形”边界。这给了我们极大的安全感调控制点时不需要担心曲线飞出画布。1.3 画连线前先想清楚你的需求我见过很多同事直接套公式结果画出的曲线方向怪怪的。问题往往不在公式而在没定义清楚“你要这条线表达什么”。如果只是两个节点之间画装饰性连线控制点可以直接取中点加一个垂直方向的固定偏移。如果是流程图的“有向”连线并且需要表示数据从 A 流向 B那么曲线最好能体现“从 A 的出口出来经过一段路径进入到 B 的入口”这时控制点的确定需要参考 A 和 B 的朝向而不是简单的中点偏移。如果是树状图里的父子节点连线通常希望曲线像“括号”一样先向上走再落到子节点这时控制点的位置又完全不同。还有一个容易被忽略的点连线两端是否带箭头如果带箭头曲线末端的切线方向就是 t 1 时的一阶导数方向你需要用这个方向来旋转箭头否则箭头会歪。计算方式也不复杂对 P(t) 求导得到P(t) 2 * (1 - t) * (P1 - P0) 2 * t * (P2 - P1)在 Canvas 里画箭头时我就用这个公式算出终点切线向量再旋转到箭头形状。这个细节很多教程不提但实际项目里作用很大。2. 核心细节解析与实操要点2.1 控制点选择的三种常用策略控制点是二阶贝塞尔曲线的灵魂。同一个起点和终点控制点位置不同画出来的曲线视觉差异巨大。我整理了三种我实际用过的策略按适用场景分类。第一种固定垂直偏移法这是最通用的做法。先算出两个端点的中点 MM ((x0 x2) / 2, (y0 y2) / 2)然后找出从 P0 到 P2 的垂直方向向量。对于二维坐标垂直方向只有两个一个向左旋转 90 度一个向右旋转 90 度。假设方向向量 D P2 - P0那么它的一个垂直向量是 N (-D.y, D.x)。控制点就是P1 M N * k其中 k 是偏移量。k 的绝对值控制弯曲程度正负号控制弯曲方向。偏移量可以是固定像素但更好的做法是让它跟两点距离成比例例如 k 距离 * 0.25。这样不管两个节点是远是近曲线弧度看起来都足够匀称。第二种固定角度法在某些需要“层级感”的场景比如组织结构图我们不希望曲线乱弯而是希望它先从当前节点垂直向上走一段再水平拐到目标节点附近。这时可以让控制点落在“从起点出发、沿着某个角度延伸”的方向上。例如希望曲线从起点沿竖直方向往上“弹”出去控制点就是P1 (x0 (x2 - x0) * 0.5, y0 - offset)这个做法直观调起来也简单。缺点是当目标节点位于起点左上方时这条曲线可能像绕了一个大圈。第三种按节点朝向偏移法节点编辑器、流程图工具最常用。每个节点通常知道自己有哪些“输出锚点”和“输入锚点”例如输出锚点在右侧输入锚点在左侧。连接线发出端应该沿输出锚点的方向延伸一段距离再转向终点进入端也应该从目标方向反推一段距离。这样曲线会很自然地从“出口”流出流进“入口”。具体实现是P1 不再用中点垂直偏移而是取两个端点的“方向点”再平均P1 P0 的方向延长点 L0 与 P2 的反方向延长点 L1 的中点L0 P0 方向0 * 距离 L1 P2 方向1 * 距离其中方向0 是输出锚点方向方向1 是输入锚点方向的反方向因为要从 P2 的反方向“靠近”。这样得到的曲线整体更贴合布局比全局统一偏移更有设计感代价是要给每个节点维护锚点方向的数据结构。2.2 向量运算基础与坐标计算如果你已经熟悉向量运算可以直接跳过这段。但很多新手第一次写下面的代码时容易把垂直向量求反所以我单独讲一下。两点向量D P2 - P0也就是 D.x x2 - x0D.y y2 - y0。单位向量把 D 除以它的长度 len。len Math.hypot(D.x, D.y)。当 len 为 0 时要特别处理。垂直向量逆时针旋转 90 度得到 (-D.y, D.x)顺时针旋转 90 度得到 (D.y, -D.x)。画布坐标系里 y 轴向下你可能需要反复试一下哪个是“向上”哪个是“向下”记住一个原则即可采样代入公式看结果不要靠脑补。中点M (P0 P2) / 2也就是 M.x (x0 x2) / 2M.y (y0 y2) / 2。有了这些基础控制点计算完全可以封装成几个纯函数方便测试和复用。我通常会在代码里维护一个Vec2辅助对象或者直接用一个包含 x/y 的普通对象没必要引入额外库。坐标计算不依赖框架纯 JS 就好。2.3 如何控制曲线的弯曲方向和弯曲程度弯曲方向本质上由控制点 P1 相对中点 M 的位置决定。Canvas 坐标系中 y 轴向下这就导致一个反直觉的现象想让曲线朝“上”弯控制点的 y 坐标反而要小于中点 y想让曲线朝“下”弯控制点 y 坐标要比中点 y 大。为了让方向判断不出错我建议在开发时直接在控制台打几个采样点看曲线初始的方向。例如P0 在 (100, 100)P2 在 (300, 100)中点 M 是 (200, 100)。此时如果我把控制点放到 (200, 50)也就是中点的正上方那曲线会像一个桥洞一样向上拱起。如果放到 (200, 150)曲线就向下凹。这是最容易理解的例子。弯曲程度则由控制点到中点的距离控制。偏移量越大曲线越“鼓”。我在项目里一般把偏移系数控制在 0.2 到 0.5 之间小于 0.2 时曲线太直几乎没有存在感大于 0.5 时曲线可能会超出很多人的审美范围而且当两个节点距离很近时会显得异常突兀。3. 实操过程与核心环节实现3.1 用 Canvas 实现完整的“两点连线”组件先说最直接的方式用 Canvas 2D 的quadraticCurveTo它能直接用二阶贝塞尔曲线绘制路径底层已经帮你处理好了公式不需要手动采样。核心代码很简洁function drawBezierLine(ctx, p0, p2, bend 0.25) { const mx (p0.x p2.x) / 2; const my (p0.y p2.y) / 2; const dx p2.x - p0.x; const dy p2.y - p0.y; const distance Math.hypot(dx, dy); if (distance 1e-6) { // 两点重合直接画点或不做处理 return; } // 垂直向量这里选逆时针旋转90度的方向 const nx -dy / distance; const ny dx / distance; const p1 { x: mx nx * distance * bend, y: my ny * distance * bend, }; ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.quadraticCurveTo(p1.x, p1.y, p2.x, p2.y); ctx.stroke(); }bend就是弯曲系数。我习惯传 0.25效果比较克制。如果你想画“向上弯”还是“向下弯”可以传符号例如bend -0.25就是反方向。如果不用quadraticCurveTo你也可以直接采样手动生成折线点这在 WebGL 或导出图片时比较有用function sampleQuadratic(p0, p1, p2, count 50) { const points []; for (let i 0; i count; i) { const t i / count; const mt 1 - t; const x mt * mt * p0.x 2 * mt * t * p1.x t * t * p2.x; const y mt * mt * p0.y 2 * mt * t * p1.y t * t * p2.y; points.push({ x, y }); } return points; }采样点数 30 到 100 之间视觉上基本没有区别性能开销也极低。手动采样的好处是可以对点做后续处理比如拖动过程中二次编辑、物理碰撞、避免遮挡等。3.2 使用 SVG 的实现方式SVG 和 Canvas 在画这条曲线上的思路是一样的只不过把公式交给了浏览器解析。path dM 100 100 Q 200 50 300 100 fillnone stroke#333 stroke-width2 /M是起点Q后面跟着控制点和终点。如果用 JS 动态生成就是字符串拼接const path document.createElementNS(http://www.w3.org/2000/svg, path); const mx (p0.x p2.x) / 2; const my (p0.y p2.y) / 2; const dx p2.x - p0.x; const dy p2.y - p0.y; const dist Math.hypot(dx, dy); const p1 { x: mx (-dy / dist) * dist * bend, y: my (dx / dist) * dist * bend, }; path.setAttribute(d, M ${p0.x} ${p0.y} Q ${p1.x} ${p1.y} ${p2.x} ${p2.y}); svg.appendChild(path);SVG 方案的好处是每条线都是独立 DOM 节点方便绑定事件、做动画、单独修改样式。缺点是节点特别多时 DOM 数量会拖慢页面此时 Canvas 明显更快。3.3 动态拖拽场景下的实时重绘如果节点可以拖动连线要跟着变。我通常用一个 state 管理所有节点和连线每次拖拽触发update然后重绘画布。简化版逻辑let pointA { x: 150, y: 150 }; let pointB { x: 400, y: 260 }; let dragging null; canvas.addEventListener(pointerdown, (e) { const pos getPos(e); if (isClose(pos, pointA)) dragging A; else if (isClose(pos, pointB)) dragging B; }); canvas.addEventListener(pointermove, (e) { if (!dragging) return; const pos getPos(e); if (dragging A) pointA pos; if (dragging B) pointB pos; redraw(); }); canvas.addEventListener(pointerup, () { dragging null; }); function redraw() { ctx.clearRect(0, 0, width, height); drawNodes(); drawBezierLine(ctx, pointA, pointB, 0.3); }这里有一个细节pointermove在拖拽过程中会高频触发每一次都重新clearRect和重绘所有节点简单场景没问题如果节点和连线非常多就建议用requestAnimationFrame合并绘制。你可以在事件回调里只更新坐标把真正的绘制放到 rAF 中避免连续鼠标事件把渲染队列塞满。3.4 大量连线的性能与渲染优化当你画了几百甚至上千条二阶贝塞尔曲线时性能瓶颈多半不在贝塞尔计算而在绘制调用次数和路径重建上。Canvas 的路径对象如果反复构建GC 压力会变大我这里有一个实测可用的优化方法预先创建Path2D对象并缓存。const pathCache new Map(); function getCachedPath(id, p0, p2, bend) { let path pathCache.get(id); if (!path) { path new Path2D(); // 计算控制点... const cx ...; const cy ...; path.moveTo(p0.x, p0.y); path.quadraticCurveTo(cx, cy, p2.x, p2.y); pathCache.set(id, path); } return path; }前提是线和节点没有频繁移动。如果节点位置会变化缓存命中率低那就别缓存老老实实每次重建路径然后把strokeStyle之类的样式设置放在绘制循环外面否则 Canvas 会不停地切换状态这个开销往往比画曲线本身还大。另一个思路是用离屏 Canvas 先把固定不变的连线层画好拖拽时只把动态连线画在顶层。这个方案做节点编辑器时非常香静态节点和背景不需要每次重画帧率能明显上去。4. 常见问题与排查技巧实录4.1 曲线弯的方向“反了”或“绕路”这是新手最容易踩的坑。我最初调 Canvas 连线时希望线条从起点往右下方延伸结果控制点公式算出来曲线总是往左上拱看起来像背道而驰。原因很简单坐标系 y 轴正方向是向下你脑中默认“上方是正方向”但代码里 y 越小越靠上。解决方式有两种要么统一用“垂直向量直接改成顺时针旋转”的那一套要么保留公式但记住符号的影响。我给的排查方法很笨但很快画一条从 (100, 100) 到 (300, 100) 的线然后分别尝试p1.y 50、p1.y 150看哪一种符合你的预期再确定偏移系数符号。一旦确认把这个符号写成常量不要到处手写正负号。4.2 两个端点重合或距离过近时曲线异常当起点和终点距离非常近时垂直向量计算里的除法会出现问题distance趋向 0控制点会被推到极远的位置曲线狰狞。处理方式有两条路距离小于某个阈值例如 5px时直接不画曲线或者画一条直线。给偏移量设一个最小绝对值例如bendDistance Math.max(distance * bend, 20)保证控制点不会变成无法收敛的数学异常。这类边界情况在编辑器里很常见因为用户完全可能把两个节点叠在一起。你必须在渲染函数里做防御性判断而不是依赖上层逻辑保证节点不重合。4.3 曲线穿过自己的节点或被文字遮挡节点连线时如果你把起点 P0 直接用节点中心坐标曲线很可能从节点中心“穿膛而过”视觉上非常糟糕。解决方案是引入“锚点”概念连线的起点不是节点中心而是节点边框与出口方向的交点。简单做法是取节点中心沿出口方向偏移一个半径 r得到P0终点同样从目标节点的中心沿入口反方向偏移。这样曲线只会从边框边缘开始到另一个边框边缘结束看起来就是连接在“边缘”上。偏移量 r 可以设成节点宽度的一半或者固定 8px具体看节点形状。如果是圆角矩形建议稍微比理论半径小一点否则线头和边框之间会有一条若隐若现的缝。4.4 二阶贝塞尔曲线表达不了 S 形路径我遇到过这样的需求两个节点之间有一堆别的元素连线希望从左边绕开障碍像一个“几”字型。这种用单条二阶贝塞尔曲线做不出因为二阶曲线只有一个控制点几何上只能产生一个“弯折趋势”无法形成两个转弯。解决方案是用两条二阶贝塞尔曲线拼接中间加一个过渡点。例如从 P0 连到 M再从 M 连到 P2两条曲线在 M 处自然衔接。直接改用三阶贝塞尔曲线用两个控制点在两端各“拧”出需要的方向。第二种更省事。三阶公式P(t) (1-t)^3 * P0 3*(1-t)^2t * C1 3(1-t)*t^2 * C2 t^3 * P2控制点 C1、C2 分别控制起点和终点的切线方向。你可以把 C1 放在 P0 右侧C2 放在 P2 左侧曲线就会先向右拐再向左拐形成 S 形。整体还是受凸包性质约束不会乱飞。但对于绝大多数“两个节点之间一条连接线”的产品需求二阶够了。我一般不会为了极小概率的绕行需求一开始就上三阶而是先用二阶把整体跑通需要 S 形的地方再局部切到三阶。4.5 曲线模糊或高清屏下线条发虚Canvas 在高 DPI 屏幕上默认会按 CSS 尺寸进行像素映射导致曲线发虚。标准做法是读取devicePixelRatio把 Canvas 的物理像素尺寸放大再通过ctx.scale(ratio, ratio)把坐标系还原到逻辑像素。const dpr window.devicePixelRatio || 1; canvas.width width * dpr; canvas.height height * dpr; canvas.style.width width px; canvas.style.height height px; ctx.scale(dpr, dpr);SVG 是矢量渲染没有这个问题。所以如果项目对清晰度要求苛刻且连线数量不多直接用 SVG 更省心。4.6 大量连线时页面卡顿的排查思路遇到卡顿先别急着优化贝塞尔计算。先打开 Performance 面板看是脚本执行时间长还是绘制时间长。我遇到过的最常见瓶颈出现在几个地方每次 draw 都重新设置strokeStyle、lineWidth导致 Canvas 状态频繁切换。用大量 DOM 节点表示连线并频繁更新d属性。拖拽事件回调里直接同步重绘没有做节流或 rAF 合并。节点和连线混在同一个数组里每次都做排序或过滤。贝塞尔公式本身在 t0 到 1 区间只是四次乘法加法级别的计算性能开销很小。真正的开销来自于不必要的全局重绘和状态切换。优化的顺序是先砍重复绘制再减少路径重建最后实在不行才考虑 WebGL 或离屏 Canvas。最后分享一个调试技巧在我自己画这类连线时最常用的小技巧是临时把控制点也画出来。用一个小圆圈标记 P1再把 P0 到 P1、P1 到 P2 用半透明直线连起来。这样你能立刻看出曲线为什么这么弯、方向为什么不对比闭着眼调参数快得多。调试代码可以这样加// 调试用画控制点和辅助线 ctx.save(); ctx.globalAlpha 0.3; ctx.beginPath(); ctx.moveTo(p0.x, p0.y); ctx.lineTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); ctx.globalAlpha 1; ctx.beginPath(); ctx.arc(p1.x, p1.y, 4, 0, Math.PI * 2); ctx.fillStyle red; ctx.fill(); ctx.restore();这个习惯帮我省了很多排查时间。等曲线形状确定后再把这个调试块删掉或放到一个debug开关下面就行。项目上线后如果用户反馈连线不好看你也可以直接打开这个开关截图排查比让用户描述“线歪了”要高效很多。