任意两个点的曲线连接JS算法 « 张鑫旭-鑫空间-鑫生活

这篇文章发布于 2023年02月27日，星期一，22:03，归类于 Canvas相关, JS实例。阅读 16377 次, 今日 8 次 6 条评论

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10719 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

在一些在线的脑图或者流程图示意的工具中，使用曲线连接两个模块是非常常见的效果，例如figma里面的figjam。

曲线连接示意

figjam是我用过体验非常赞的一个工具，衡量自己Web前端技术的一个简单办法就是，如果让你实现这样一个产品，你能否立刻在脑中形成实现方案，并完成之。

我就想过这个问题，如果我来实现figjam，我能行吗？

突然意识到非常不确定，所谓不确定，就是还需要摸索，对能否完成，以及完成所需的时间模糊，换言之，就还是技术积累不够。

机会总是留给有准备的人的，既然自己决定深耕于交互体验领域，就必须将自己的技术缺漏补上。

如何补，很简单，聚沙成塔，也就是从一个一个的小功能的实现开始积累。

所以，我决定先研究下给任意两个点，这两个点使用贝塞尔曲线连接该如何实现。

一、任意两点之间的曲线

需求为：给定起点和终点，然后自动得到曲线

说到曲线，在计算机图形领域，一定离不开“贝塞尔曲线”，之前我有专门介绍过“深度掌握SVG路径path的贝塞尔曲线指令”。

如果你使用过PS中的钢笔工具绘制过曲线，那么对里面提到的“控制点”也应该非常熟悉，基本上，脑中只要想一下起止点和控制点，曲线什么样子脑中就自动出现了，因为控制点和定位点的连线本质上是曲线的切线，所以并不难脑补。

现在起止点有了，只要知道控制点的位置，曲线自然就得到了。

理论上，控制点可以在任意位置，这就导致曲线可能千千万，所以，我们需要进行约束，增加限定条件，比方说曲线的切线是垂直的，两个控制点的垂直坐标是一致的（不一致也可以），此时的曲线效果就会如下图所示（黑色圆点是控制点）：

曲线和控制点示意

此时，控制点的位置就可以确定了，横坐标和起点或终点的横坐标一致，纵坐标在起始点之间（偏差越大，曲线曲率越大）。

算法知道了，下面就是落地成代码……

二、canvas中的曲线绘制

SVG和canvas都能绘制曲线，从易用性上讲，还是canvas更合适，其提供了原生的曲线绘制方法。

包括二次贝塞尔曲线方法 quadraticCurveTo() 和三次贝塞尔曲线方法bezierCurveTo()。

我们这里使用的是 context.bezierCurveTo()方法，语法为：

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

其中，cp1和cp2指的是两个控制点，(x, y)是结束点，起点使用 context.moveTo(x, y) 语句指定，详见我写的这个API文档。

于是我们就可以抽象出如下所示的绘制代码（假设canvas绘制的上下文对象是 context）：

var drawCurve = function (startX, startY, endX, endY) {   
    // 曲线控制点坐标
    var cp1x = startX;
    var cp1y = startY + (endY - startY) / 2;
    // 这里的除数2和曲线的曲率相关，数值绝大，曲率越小
    var cp2x = endX;
    var cp2y = endY - (endY - startY) / 2;
    
    // 开始绘制曲线
    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = '#000';
    context.moveTo(startX, startY);
    // 绘制曲线点
    context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endX, endY);
    context.stroke();
};

绘制曲线，然后描边。