【Android UI】贝塞尔曲线 ② ( 二阶贝塞尔曲线公式 | 三阶贝塞尔曲线及公式 | 高阶贝塞尔曲线 )

韩曙亮

发布于 2023-03-30 16:08:40

1.2K0

发布于 2023-03-30 16:08:40

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

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

一、二阶贝塞尔曲线公式

二阶贝塞尔曲线公式如下 :

B(t) = (1- t)^2P_0 + 2t(1-t)P_1 + t^2P_2, t \in [0,1]

P_0 , P_1 , P_2

是给定的平面中的

3

个点 ,

P_0

是曲线起始点 ,

P_2

是曲线结束点 ,

P_1

是控制点 ;

t

的取值范围是

0.0

~

1.0

;

二、三阶贝塞尔曲线

上图中 ,

P_0

点是起始点 ,

P_3

点是终止点 ,

P_1

和

P_2

点是控制点 ;

三阶贝塞尔曲线公式如下 :

B(t) = (1- t)^3P_0 + 3t(1-t)^2P_1 + 3t^2(1-t)P_2 + t^3P_3, t \in [0,1]

先根据比例 , 绘制出

P_0

与

P_2

之间的二阶贝塞尔曲线 , 以

P_1

为控制点 , 绘制出直线

AB

;

然后绘制

P_1

与

P_3

之间的二阶贝塞尔曲线 , 以

P_2

为控制点 , 绘制出直线

BC

;

最后计算

A

到

C

之间的二阶贝塞尔曲线 , 以

B

点作为控制点 ;

三阶贝塞尔曲线动态绘制流程 :

三、高阶贝塞尔曲线

B(t) = \sum_{i = 0}^{n} \dbinom{n}{i} P_i (1-t)^{n - i}t^i

= \dbinom{n}{0} P_0 (1-t)^{n}t^0 + \dbinom{n}{1} P_1 (1-t)^{n - 1}t^1 + \cdots

+ \dbinom{n}{n-1} P_{n-1} (1-t)^{1}t^{n -1} + \dbinom{n}{n} P_n (1-t)^{0}t^n , t \in [0,1]

上述公式中

i

是贝塞尔曲线的阶数 ;

四阶贝塞尔曲线 :

五阶贝塞尔曲线 :

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-07-21，如有侵权请联系 cloudcommunity@tencent.com 删除

android

ui

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

android

ui

登录后参与评论

0 条评论

热度