【Android UI】贝塞尔曲线 ① ( 一阶贝塞尔曲线 | 二阶贝塞尔曲线 )

文章目录

• 一、一阶贝塞尔曲线
• 二、二阶贝塞尔曲线

贝塞尔曲线参考 : https://github.com/venshine/BezierMaker

一、一阶贝塞尔曲线

一阶贝塞尔曲线 本质 是一条直线 , 下图是 一阶贝塞尔曲线 ,

是曲线开始位置 , 逐个点向

绘制 ;

请添加图片描述

二、二阶贝塞尔曲线

二阶贝塞尔曲线 需要在 一阶贝塞尔曲线 基础上 , 添加一个控制点 , 曲线的绘制受控制点影响 ;

下图中 由

向

绘制 二阶贝塞尔曲线 , 控制点是

;

请添加图片描述

由

点绘制一条曲线到

点 , 绘制该曲线时 , 有一个控制点

, 相当于 将曲线向 " 控制点

" 方向拖动 , 产生一条圆滑的弧线 ;

上述绘制的 弧线 , 是通过计算得来的 , 绘制

到

的弧线 , 中间引入一个控制点

,

在这里插入图片描述

• 首先由 起始点

与 控制点

进行连线 ,

在这里插入图片描述

• 然后由 控制点

与 结束点

进行连线 ,

在这里插入图片描述

到

可以认为是 一阶贝塞尔曲线 ,

到

也可以认为是 一阶贝塞尔曲线 ,

• 由 起始点

与 控制点

连线的这条线开始进行控制 ,

• 在 起始点

与 控制点

连线上找到一个 比例值

( 取值范围

) , 找到

比例所处的点

, 同时在 控制点

与 结束点

连线上 , 找到一个 比例值

对应的点

, 将

两个点进行连线 ,

在这里插入图片描述

• 贝塞尔曲线上绘制的点 , 是 在

连线上的

比例所在位置 , 绿色的点

就是贝塞尔曲线要绘制的位置 ;

在这里插入图片描述

上述计算过程中的比例 :

其中

表示

点到

点的线段长度 ,

表示

点到

点的线段长度 ;