贝塞尔曲线及应用

本文详细介绍了贝塞尔曲线的原理,从一阶到三阶贝塞尔曲线的推导,以及四阶与五阶贝塞尔曲线的通用公式。重点讨论了如何在Android中使用贝塞尔曲线,包括实现水波纹效果的能量球动画,通过quadTo和rQuadTo方法绘制贝塞尔曲线。文章提供了完整的水波纹能量球实现代码,展示了贝塞尔曲线在动态效果中的应用潜力。
摘要由CSDN通过智能技术生成

贝塞尔曲线介绍

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。

贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发,以稳定数值的方法求出贝兹曲线。

贝塞尔曲线为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。

贝塞尔曲线是从起始点P0开始,在控制点的控制下,根据t值的变化而变化,最终到达终点PN之后的路径,改变控制点的位置会影响最后曲线的形状,其中t的值为0~1,可以把t当作百分比来理解。

贝塞尔曲线公式推导

一阶贝塞尔曲线

图中红色的线就是一阶贝塞尔曲线。

一阶贝塞尔曲线最开始只有开始点P0和结束点P1,没有控制点,所以是一条直线

红色的线由点P2动态移动得来,P2跟随着t的变化(从0过渡到1)而变化。我把P2这样的点成为贝塞尔曲线点

P2变化的规则是   线P0P2 =  线P0P1 * t ,这是线P0P2长度的计算结果,但是点P2的位置是P0的位置加上线P0P2长度才对。

P2 = P0 + P0P2

P2 = P0 + P0P1*t

P2 = P0 + (P1 - P0)*t

P2 = P0 + t*P1 - t*P0

P2 = (1-t)*P0 + t*P1

将P2替换成函数B(t)来表达得出,一阶贝塞尔曲线一般公式是:

二阶贝塞尔曲线

图中红色的曲线既是二阶贝塞尔曲线的一种

它的绘制过程有 P0 ~ P5  6个点参与,

最原始的点有三个 P0 ~ P2,P0是开始点,P2是结束点,P1是控制点

P3 ~ P5是P0 ~ P2根据t的变化动态生成的点。

P3 是 P0,P1两个点的一阶贝塞尔曲线点

P4 是 P1,P2两个点的一阶贝塞尔曲线点

P5 是 P3,P4两个点的一阶贝塞尔曲线点

在绘制过程中有三个层的变化过程,第一层,也是最外层的黑色线段,是由初始的点P0,P1,P2按照顺序依次连接而成,然后在第一层的基础上,分别取第一层的两点之间的一阶贝塞尔曲线点,从而生成了第二层的两个点P3,P4,也就是绿色的线段,然后再取第二层的两个点的一阶贝塞尔曲线点,生成了最后的贝塞尔曲线的点P5,最后绘制整个P5的运动轨迹即可得到P0,P1,P2这三个点的二阶贝塞尔曲线。

P5是最终的贝塞尔曲线点,它是P3,P4的一阶贝塞尔曲线,带入一阶贝塞尔曲线公式,可得

P5 = (1-t)P3 + t*P4

同理P3 = (1-t)P0 + t*P1     P4 = (1-t)P1 +t*P2

将P3,P4的等式代入导P5的计算式中可得

P5 = (1-t)*P3 + t*P4

P5 = (1-t)*{\color{Red} ((1-t)*P0 + t*P1)} + t*P4           --->先替换P3

P5 = (1-t)((1-t)P0 + t*P1) + t*{\color{Red} ((1-t)P1 +t*P2)}     --->然后替换P4

P5 = (1-t)^{2}*P0 + (1-t)*t*P1 + t*(1-t)*P1 +t*t*P2)  --->展开等式

P5 = (1-t)^{2}*P0 + 2*t*(1-t)P1 + t^{2}*P2)

将P5用函数B(t)代替可得二阶贝塞尔曲线通用公式

三阶贝塞尔曲线

图中红色的曲线就是三阶贝塞尔曲线的一种

共有10个点参与绘制,第一层黑色线段 P0-P1-P2-P3,第一层时原始给出的点&#x

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值