一条神奇的贝塞尔曲线及其应用

一条神奇的贝塞尔曲线及其应用

程序IT圈

学习编程技术,关注这个公众号足够了

一条神奇的贝塞尔曲线及其应用
 

今天的主题,就是主要和大家介绍贝塞尔曲线!

什么是贝塞尔曲线?

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的 。

贝塞尔曲线的类型

以下公式中:B(t)为t时间下 点的坐标;

P0为起点,Pn为终点,Pi为控制点

一阶贝塞尔曲线(线段):

一条神奇的贝塞尔曲线及其应用
一条神奇的贝塞尔曲线及其应用

二阶贝塞尔曲线(抛物线):

一条神奇的贝塞尔曲线及其应用

一条神奇的贝塞尔曲线及其应用

三阶贝塞尔曲线:

一条神奇的贝塞尔曲线及其应用

一条神奇的贝塞尔曲线及其应用

四阶贝塞尔曲线:

一条神奇的贝塞尔曲线及其应用

五阶贝塞尔曲线:

一条神奇的贝塞尔曲线及其应用

通用公式:

一条神奇的贝塞尔曲线及其应用

更多的贝塞尔曲线,大家可以去看一下这个网站,可以自己画点的位置

http://myst729.github.io/bezier-curve/

一条神奇的贝塞尔曲线及其应用

贝塞尔曲线的应用

可能前面的公式你没有完全看懂,但这并不影响我们的应用 。现在贝塞尔曲线在软件开发中的应用是越来越多了,比如下面这个制作波浪曲线的,就是应用二阶贝塞尔曲线实现的 。

例子参照

https://blog.csdn.net/z82367825/article/details/51599245

一条神奇的贝塞尔曲线及其应用

如何用Android实现上面的效果图呢?

在Android中Path类中其实是有已经封装好了关于贝塞尔曲线的函数的

一条神奇的贝塞尔曲线及其应用

quadTo()方法,可以从源码的注释看出(x1,y1)是控制点坐标,(x2,y2)是终点坐标

一条神奇的贝塞尔曲线及其应用

原理图:

一条神奇的贝塞尔曲线及其应用

通过属性动画类ValueAnimator不断改变点1的横坐标,随着点1横坐标向右移动,点2,点3,点4,点5,以及四个控制点的坐标随着点1的移动同时位移相同距离,每一次坐标点更新,我们调用一次invalidate()方法,调用draw重新绘制视图,绘制四段贝塞尔曲线。最后点1移动到原先点3的位置,这样就完成了一次动画。这样,通过循环不断的动画效果,我们就实现了波浪的效果。

 

关键的onDraw代码如下:

 

一条神奇的贝塞尔曲线及其应用

如果需要完整的程序代码,可以长按下面的公众号,后台回复:贝塞尔曲线 。

一条神奇的贝塞尔曲线及其应用

一条神奇的贝塞尔曲线及其应用

原创文章,作者:栈长,如若转载,请注明出处:https://www.cxyquan.com/1460.html

发表评论

登录后才能评论

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息