二次贝塞尔曲线起终点、控制点(Q、T)的理解与实现

有图有真相

二次贝塞尔曲线起终点、控制点(Q、T)的理解与实现_第1张图片

请结合图理解:

const _path = new Path ( 'M0 0 Q5 20, 10 20 T15 35, Q17.5 50, 20 50 T25 25, Q27.5 0, 30 0 T35 0, Q37.5 0, 40 0 T45 15, Q47.5 30, 50 30 T55 20, Q57.5 10, 60 10 T65 5, Q67.5 0, 70 0' ).close();

那么,(0,0)为起点,然后 Q5 20,10 20中的第一个点(5,20)为控制点,第二个点(10,20)为曲线终点,然后曲线的连接为从(0,0)连接到(10,20),曲率为切线切着点(5,20),如图。
然后T点(15,35)为二次贝塞尔曲线的平滑结尾(也是下一次曲线的起点),其控制点为 Q5 20,10 20中的第一个点(5,20)的对称坐标点(15,20),然后同理,曲线的连接为从(10,20)连接到(15,35),曲率为切线切着点(15,20),如图。

然后,点(15,35)就作为下一次曲线的起点,然后遵循如上所诉的画线规律进行画线。

你可能感兴趣的:(web前端)