# 📐 构造二次贝塞尔曲线：轻松实现节点间的优雅连线

在开发思维导图或树状结构应用时，如何优雅地连接节点并绘制平滑的线条

# ✨ 贝塞尔曲线简介

贝塞尔曲线是一种用于生成平滑曲线的数学工具 。它广泛应用于图形设计、动画、UI 开发等领域。贝塞尔曲线的特点是可以通过控制点来调整曲线的形状，从而生成各种平滑的路径。
多个贝塞尔曲线的组合可以生成各种复杂的曲线，如圆弧、曲线、贝塞尔曲线等。
一次贝塞尔曲线的公式是： B(t) = (1 - t) * P₀ + t * P₁

# 二次贝塞尔曲线

二次贝塞尔曲线是最简单的贝塞尔曲线类型之一，它由以下三个点定义：

• 起点 (P₀)：曲线的起始点。
• 控制点 (P₁)：决定曲线的弯曲方向和程度。
• 终点 (P₂)：曲线的结束点。
  通过这三个点，我们可以构造出一条平滑的曲线。其公式如下：
  B(t) = (1 - t) ^ 2 * P₀ + 2 * t * (1 - t) * P₁ + t ^ 2 * P₂ t ∈ [0, 1]

# 🛠 使用二次贝塞尔曲线连接节点

这里采用 react-konva 中的 Shape 组件来绘制二次贝塞尔曲线。 Shape 提供了一个 sceneFunc 属性，允许我们直接操作 Canvas 上下文

<Shape

    sceneFunc={(ctx, shape) => {

        ctx.beginPath();

        ctx.moveTo(startX, startY); // 移动到起点

        ctx.quadraticCurveTo(

            startX,   // 控制点 X 坐标

            endY,     // 控制点 Y 坐标

            endX,     // 终点 X 坐标

            endY      // 终点 Y 坐标

        );

        ctx.fillStrokeShape(shape); // 应用填充和描边

    }}

    stroke="blue"       // 线条颜色

    strokeWidth={2}     // 线条宽度

/>

# 📚 参考资料 (多次也可以参考如下)

• konva 官方文档