贝塞尔 平滑曲线

本次阅读大概需要5分钟
先看效果

平滑曲线

简单说明一下（对名称不清楚的都能在下文中找到，不要着急）
1.本案例适用于类似给定每天的销售额，画出当月的销售曲线
2.本曲线的特点是曲线任意处都是光滑的，数据点之间的曲线任意值都不能大于数据点值同时也不存在极值点（要么是上升曲线要么下降曲线，不可以是又上升又下降）
3.我们实现平滑需求使用的核心功能是三次贝塞尔曲线，我们要解决的核心问题是找到三次贝塞尔曲线的两个控制点
4.贝塞尔曲线本身是平滑的（这个不做证明）

mPath.moveTo(currentPointX,currentPointY);
mPath.cubicTo(firstControlPointX, firstControlPointY, secondControlPointX, secondControlPointY, nextPointX, nextPointY);
数据点P0（currentPointX,currentPointY）和P1（nextPointX,nextPointY）是给定的，我们的核心是如何找到firstControlPoint（firstControlPointX, firstControlPointY,）和secondControlPoint （secondControlPointX, secondControlPointY） 这两个点不是唯一的，准确的说有无数多个，我们只要找到其中一组就可以。
如果firstControlPoint 和secondControlPoint 可以满足以下两个条件就可以实现我们的目标了

• 生成的曲线是光滑的那么就必须满足C2 P2 C3在同一条直线上， C4 P3 C5在同一条直线上。
• C1 C2 在P1与P2的矩形范围之间 （可以等于），C3 C4在P2 P3的矩形范围之间并且C2 Y方向距离P2要小于等于C1到P2的距离
  
  

  数据点与控制点位置关系图 图1

一. 关于贝塞尔曲线（如果清楚可以跳过）

1. 什么是贝塞尔曲线##

线性贝塞尔曲线：

二次贝塞尔曲线：

三次贝塞尔曲线：

以下证明过程解释为什么我们要使用三次贝塞尔曲线
定理：设三次贝塞尔曲线的四个点为P0,P1,P2,P3（其中P0和P3称为端点，P1和P2称为控制点），则P0和P1的连线是P0的切线，P3和P2的连线是P3的切线。

我们之前说了贝塞尔曲线是光滑的，那如果希望我们所有的位置都是光滑的，那么连接点处必须也要光滑，如下图 我们刚刚证明了，使用三次贝塞尔曲线C2与P2的连线与P1 C1 C2 P2生成的曲线是相切的，同样三次贝塞尔曲线P2与C3的连线与P2 C3 C4 P3生成的曲线也是相切的，（当曲线上每一点处都具有切线，且切线随切点的移动而连续转动，这样的曲线成为光滑曲线。如果C2与P2连成的线C2P2同P2与C3连成的线P2C3是同一条直线那么P1 P2之间的曲线和P2 P3之间的曲线在P2点是光滑的） 这就是为什么要使用三次贝塞尔曲线的理论基础 如果生成的曲线是光滑的那么就必须满足C2 P2 C3在同一条直线上， C4 P3 C5在同一条直线上。
如果C1 和C2在我们的P1和P2之间那么生成的曲线就不会超过给数据点这个通过三次贝塞尔曲线的图就可以看出，当然如果C1，C2超过了P1和P2那生成的曲线可能也会在P1和P2之间

二. 关于代码部分

mPath.moveTo(P0.x,P0.y);
mPath.cubicTo(firstControlPointX, firstControlPointY, secondControlPointX, secondControlPointY, P3.x, P3.y);
其中P1（firstControlPointX, firstControlPointY） P2（secondControlPointX, secondControlPointY）是控制点我们生成 不是数据点请注意。
代码地址
https://github.com/jiahengcen/SmoothPoint