连续bezier曲线的实现
需求场景 一系列的坐标点,划出一条平滑的曲线 3次Bezier曲线 基本上大部分绘图工具都实现了3次Bezier曲线,4个点确定一条3次Bezier曲线。以html5中的canvas为例 let ctx = canvas.getContex('2d'); ctx.moveTo(20,20); // 曲线起点 Fom ctx.bezierCurveTo(20,100,200,100,200,20); // 分别为控制点 Ctrl1,Ctrl2, 终点 To 连续Bezier曲线 假定给定点的序列List,我们应该以List中的每个点为起点,其下一个点Next为终点绘制Bezier曲线。 所以问题变成,如何确定这两个点之间的两个Bezier控制点。 每一小段路径From-To的Bezier曲线并不是独立的,其实收到了其前后两个点的影响(Prev,Next) 我们在绘制每一段路径的时候,引入其前点Prev,和后点Next共同计算当前Bezier曲线的控制点Ctrl1,Ctrl2 如图所示 绘制从From到To的Bezier曲线,引入Prev,Next作参考点。 先依次连线4个点,记为线段l1,l2,l3,并求出其中点c1,c2,c3 连接中点,在c1c2上找一点f1, 使 l1:l2 = c1f1:f1c2。也就是 c1f1 = c1c2 * l1/(l1+l2)。我叫它线段比例法