HarmonyOS Next开发教程：详解贝塞尔曲线 原创

好久不见啊大家，经过了一段时间的忙碌，终于能抽出空来跟大家分享一期鸿蒙开发教程。
今天要分享的是贝塞尔曲线。
在鸿蒙开发中，提供了两种绘制贝塞尔曲线的方式，一种是二次贝塞尔曲线

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number)
1.

一种是三次贝塞尔曲线：

bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number)
1.

接触过贝塞尔曲线的同学有没有这种感觉：我按照要求转入了坐标，但是这曲线完全不经过我设定的轨迹，我控制不了它啊～我做不到啊！！！
这里幽蓝君就要跟大家解释一下了，这两种绘制方式，除了最后一个坐标是曲线的终点会被经过以外，另外的点叫做曲线的控制点，并不一定被经过。
咱们拿相对简单的二次贝塞尔曲线为例，虽然在绘制方法中只要求传入两个坐标，但是二次贝塞尔曲线是由三个点决定的，分别是起点、终点和一个控制点。
对于起点大家可以使用moveTo方法将起始位置移到相应坐标。
这时候重点来了。
大家想一想，如果说有二次和三次贝塞尔曲线，那有没有一次贝塞尔曲线？
咱们推理一下，三次贝塞尔曲线有两个控制点，二次贝塞尔曲线有一个控制点，那么一次贝塞尔曲线他就是没有控制点，只有起点和终点。所以所谓一次贝塞尔曲线就是一条直线。

那如果它有了一个控制点之后，变成二次贝塞尔曲线，它的轨迹应该是这样的：
起点和终点分别向控制点连线，曲线的走向应当和这两条线段相切：

那如果是三次贝塞尔曲线呢？这个时候也会产生两条线段，分别是起点和第一个控制点，终点和第二个控制点连接成的线段，这条曲线也应当和这两条线段相切：

所以大家现在能够理解曲线为什么不经过你传入的坐标。
有的同学要说了，我现在理解了，但是我还是不会画呀，我怎么知道控制点的坐标呢？
幽蓝君以画圆为例，希望大家看得明白。
在贝塞尔中是无法直接画一个圆的，但是可以画四个四分之一圆进行拼接，咱们就以画一个四分之一圆为例。

因为这个四分之一圆要和对应的两条线段相切，所以这两个控制点和起始点一定是水平或垂直的关系，我只需要知道这两条线段有多长就可以了，而且这两条线段也一定是相等的长度，所以这里又引出一个魔法系数m，根据复杂的计算，当我需要画一个标准的四分之一圆是这个系数近似等于0.551915024494*r,所以当圆的半径为10，我传入的坐标就是：

bezierCurveTo(10*0.551915024494,0, 10, 10 - 10*0.551915024494, 10, 10)
1.

那么这个魔法系数又是怎么计算出来的，这就属于纯纯的数学问题了，如果大家感兴趣，咱们有机会再详细说说。