贝塞尔曲线的全解析
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名,称为贝塞尔曲线。 贝塞尔曲线为计算机矢量图形学奠定了基础。 它的主要意义在于无论是直线或曲线都能在数学上予以描述。 抛物线的三切线定理: 设P0、P02、P2是一条抛物线上顺序三个不同的点。过P0和P2点的两切线交于P1点,在P02点的切线交P0P1和P2P1于P01和P11,则如下比例成立: 当P0,P2固定,引入参数t,令上述比值为t:(1-t),即有: t从0变到1,第一、二式就分别表示控制二边形的第一、二条边,它们是两条 一次Bezier曲线 。将一、二式代入第三式得: 依次类推, 由四个控制点定义的三次Bezier曲线P03可被定义为分别由(P0,P1,P2)和(P1,P2,P3)确定的两条二次Bezier曲线的线性组合。 即由 (n+1) 个控制点Pi(i=0,1,...,n)定义的n次Bezier曲线P0n可被定义为分别由 前、后n个控制点 定义的 两条(n-1)次 Bezier曲线P0n-1与P1n-1的线性组合: 由此得到Bezier曲线的递推计算公式: 以下公式中:B(t)为t时间下点的坐标;P0为起点,Pn为终点,Pi为控制点 由 P0 至 P1 的连续点P01,描述的一条线段: transition-timing-function 规定过渡效果的时间曲线为贝塞尔曲线 transition: all 2s cubic-bezier( p1x, p1y, p2x, p2y ) 项目预览地址: http://jsrun.net/tr3Kp
贝塞尔曲线
有一种动画是跟着一条轨迹走的,又叫曲线动画,曲线有很多种,最著名的是 贝塞尔曲线 。什么是贝塞尔曲线,最简单的就是你用photoshop的钢笔工具画出来的曲线就是贝塞尔曲线。 曲线的核心定义: 起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 贝塞尔曲线是分阶数的。 一阶贝塞尔曲线: 二阶贝塞尔曲线: 看到这里,应该明白贝塞尔曲线是怎么回事了。图中绿色的是曲线的切线。 三阶贝塞尔曲线: 高阶贝塞尔曲线: 看图非常的复杂,看公式的推导: 拿二阶的曲线公式来说是这样的: 看起来很复杂,把它拆分开来看: B0 和 B1分别是 P0 到 P1 和 P1到 P2 的 1 阶贝塞尔曲线。而 2 阶贝塞尔曲线 B 就是 B0 到 B1 的 1 阶贝塞尔曲线。这样理解起来应该比较好理解。 然而还是很复杂,看 n 阶贝塞尔曲线的推导公式: 给定点 P0 、 P1 、…、 Pn ,其贝塞尔曲线即: 可以用下面的递归表达: 用 术语 一些关于参数曲线的术语,有 即多项式 又称作 n 阶的 伯恩斯坦基底多项式 ,定义0的0次方 = 1。 点 Pi 称作贝塞尔曲线的 控制点 。 多边形 以带有 线 的贝塞尔点连接而成,起始于 P0 并以 Pn 终止,称作 贝塞尔多边形 (或 控制多边形 )。贝塞尔多边形的 凸包 (convex hull)包含有贝塞尔曲线。 因为贝塞尔曲线公式里有时间,而且在高中大学都没学过,所有理解起来比较困难。真是艺术般的曲线。 参考: http://my.oschina.net/ososchina/blog/677307 http://blog.csdn.net/vrix/article/details/39206975 http://blog.csdn.net/tianjian4592/article/details/47067161 http://www.2cto.com/kf/201503/380377.html http://blog.csdn.net/androidzhaoxiaogang/article/details/8680330 http://blog.csdn.net/linmiansheng/article/details/18763987
必须要理解掌握的贝塞尔曲线(原创)
在Android开发和面试中(尤其是一些中高级岗位面试),面试官可能会问你自定义控件的详细内容,我们知道自定义控件这一块涉及到的内容很多,回答的越多越深入,那么面试的印象会更好。自定义控件涉及的内容比如测量和绘制、事件分发的处理、动画效果的渲染与实现,当然还有不得不提的贝赛尔曲线(实际上一些面试官自己都不是很理解二阶贝塞尔、三阶贝塞尔曲线等概念)。 一些朋友看到以歪果仁大佬名字定义的一些计算公式、定理就头大(比如梅涅劳斯(Menelaus)定理、塞瓦(Ceva)定理等),不得不承认我也是。本着《士兵突击》不抛弃不放弃的精神,因此就算是在难啃的骨头我们也要坚持啃下来!所以本篇文章主要介绍的是贝赛尔曲线的基本概念、在Android的应用场景以及一些思考。不考虑篇幅的情况下力求将概念和理解写的详细。 贝塞尔曲线,这个命名规则一眼看上去大概是一个叫贝塞尔的数学家发明的。但,贝塞尔曲线依据的最原始的数学公式,是在1912年在数学界广为人知的伯恩斯坦多项式。简单理解,伯恩斯坦多项式可以用来证明,在[ a, b ] 区间上所有的连续函数都可以用多项式来逼近,并且收敛性很强,也就是一致收敛。再简单点,就是一个连续函数,你可以将它写成若干个伯恩斯坦多项式相加的形式,并且,随着 n→∞,这个多项式将一致收敛到原函数,这个就是伯恩斯坦斯的逼近性质。 时光荏苒岁月如梭,镜头切换到了1959年。当时就职于雪铁龙的法国数学家 Paul de Casteljau 开始对伯恩斯坦多项式进行了图形化的尝试,并且提供了一种数值稳定的德卡斯特里奥(de Casteljau) 算法。(多数理论公式是建立在大量且系统的数学建模基础之上研究的规律性成果)根据这个算法,就可以实现 通过很少的控制点,去生成复杂的平滑曲线,也就是贝塞尔曲线 。 但贝塞尔曲线的声名大噪,不得不提到1962年就职于雷诺的法国工程师皮埃尔·贝塞尔(Pierre Bézier),他使用这种方法来辅助汽车的车体工业设计(最早计算机的诞生则是为了帮助美国海军绘制弹道图),并且广泛宣传(典型的理论联系实际并获得成功的示例),因此大家称为贝塞尔曲线 。 既然贝赛尔曲线的本质是通过数学计算公式去绘制平滑的曲线,那就可以通过数学工具进行实际求证以及解释说明。当然对其进行数学求证就没必要了,因为这些伟大的数学家们已经做过了,这里只是解释说明: 可能有些朋友还是不理解,那么这个GIF我截下其中的一张图说明,如下图: 动图里的P0、P1、P2分别代表的是上图的:P0 == A;P1 == B;P2 == C。那么这个黑色点,代表的就是F点,绿色线段的2个端点(P0-P1线段上的绿色点,代表是就是D点,P0-P2线段上的绿色点,代表是就是E点)。线段上面点的获取,必须要满足等比关系。 关于贝赛尔曲线的基本数学理论大概就是上面的内容。两个线段根据等比关系找点的贝塞尔曲线,一般也称为二阶贝塞尔曲线。 刚才说到,上面的贝赛尔曲线一般称为二阶贝塞尔曲线,既然是二阶贝塞尔曲线,那肯定有三阶贝塞尔曲线、四阶贝赛尔曲线等等。其实三阶贝塞尔与四阶贝赛尔曲线以及N阶贝赛尔曲线曲线的规则都是一样的,都是先在线段上找点,这个点必须要满足等比关系,然后依次连接,下面是三阶贝赛尔曲线的解释说明: 整一个三阶贝赛尔曲线的动作加起来就是下面的一张动图: 那么四阶贝赛尔曲线的实现步骤也是一样的,平面上先选取5个点(5点4线)、依次选点(满足等比关系)、依次连接、根据计算规则找到所有的点(逐个连接)。。。。。。 貌似都是从二阶贝塞尔曲线说起的,那么一阶贝赛尔又是怎么样的?一阶贝赛尔如图: 可以看到一阶贝赛尔是一条直线!因此,N阶贝赛尔不仅可以画平滑的曲线也可以画直线,因此自定义控件画直线又多了一种可选择的方式,但是一般用贝赛尔主要是画曲线,这里只是提供了一种别的解决思路;另外,在Android属性动画,系统为我们提供了一个PathInterpolator插值器。这个PathInterpolator里面就有贝塞尔曲线的身影。有兴趣的小伙伴也可以去了解一下。 未完待续。。。 如果这篇文章对您有开发or学习上的些许帮助,希望各位看官留下宝贵的star,谢谢。
premiere软件的贝塞尔曲线应该怎么用?贝塞尔曲线的应用技巧!
premiere软件里面有好几种曲线,各有不同的功能。其中,pr曲线中的贝塞尔曲线也是在剪辑视频的时候经常会用到的一个功能,可能有一些小伙伴们对这个功能不了解,导致在剪辑视频的时候走了很多的弯路,下面内容就来给大家演示一下贝塞尔曲线的使用技巧。有premiere软件从基础到进阶的各种视频课程,想自学pr软件的,一定要看看哦。premiere软件贝塞尔曲的使用技巧:1.打开PR软件,【新建序列】-选择【AVCHD1080i25(50i)】-点击【确定】。点击【序列】-【序列设置】,编辑模式选择【自定义】,帧大小为【1080*1080】,点击【确定】。2.将准备好的视频素材拖拉到时间轴轨道面板上,保持现有设置,右击选择【取消链接】,删除音频,用【剃刀工具】在两秒处点击,用【选择工具(V)】点击后半部分视频删除。3.先学习基础版本,关键帧调节。在开始位置设置横坐标为【911】,在00:00:00:07位置设置位置关键帧,在00:00:01:16位置设置横坐标为【220】,这是基础设置,视觉冲击力较木讷,不是很灵动。4.所以学习怎么在关键帧上设置贝塞尔曲线,点击第一个关键帧,右击选择【临时插值】-选择【连续贝塞尔曲线】,关键帧的图标从菱形变成沙漏型。5.下拉【位置】,将第二个关键帧右击选择【临时插值】-选择【连续贝塞尔曲线】。按住调节杠杆往下调节,速率值为【298.0/秒】,调节第二个关键帧杠杆。如下图。6.调节曲线的方法就是点击关键帧图标,出现蓝色杠杆,按住杠杆调节即可。画红色方块连接的地方尽量保持平滑,不能有高低差,使画面更灵活不突兀。7.线性关键帧的效果就没有连续贝塞尔曲线的平滑,效果没有连续贝塞尔曲线灵动,贝塞尔曲线的应用难点是使用添加连续塞尔曲线进行调节,还要通过调节连续贝塞尔曲线让画面看起来不突兀。以上就是pr曲线中贝塞尔曲线的应用技巧了,不知道你有没有看懂,自己试试看吧。
贝塞尔曲线原理
由于用计算机画图大部分时间是操作鼠标来掌握线条的路径,与手绘的感觉和效果有很大的差别。即使是一位精明的画师能轻松绘出各种图形,拿到鼠标想随心所欲的画图也不是一件容易的事。这一点是计算机万万不能代替手工的工作,所以到目前为止人们只能颇感无奈。使用贝塞尔工具画图很大程度上弥补了这一缺憾。
贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点( 起始点、终止点以及两个相互分离的中间点 )来创造、编辑图形。其中起重要作用的是位于 曲线中央的控制线 。这条线是虚拟的,中间与贝塞尔曲线交叉,两端是控制端点。 移动两端的端点时贝塞尔曲线改变曲线的曲率(弯曲的程度) ; 移动中间点(也就是移动虚拟的控制线)时,贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动 。注意,贝塞尔曲线上的所有控制点、节点均可编辑。这种“智能化”的矢量线条为艺术家提供了一种理想的图形编辑与创造的工具。
一阶贝塞尔(直线)
一阶贝赛尔曲线上的由两个点确定 P0 和P1,当t在0--->1区间上递增时,根据
此会得到多个点的坐标,其实这些的点就是一条直线上的点。
B(t) = P0 + (P1-P0)*t
B(t) = (1-t)P0 + tP1
//=>
B(t).x = (1-t)P0.x + tP1.x
B(t).y = (1-t)P0.y + tP1.y
二阶贝塞尔曲线
二阶贝赛尔曲线由`3`个点确定,它可以理解成是这样的一阶贝赛尔曲线:确定该`一阶贝赛尔曲线`的两个点是变化的。
这两个点(设分别为Pm,Pn)是怎样变化的呢,这两个点又分别是(P0,P1)确定的`一阶贝赛尔曲线`和(P1,P2)确定的`一阶贝赛尔`
Pm(t) = (1-t)P0 + tP1
Pn(t) = (1-t)P1 + tP2
B(t) = (1-t)Pm(t) + tPn(t)
= (1-t)^2 P0 + 2(1-t)tP1+ t^2P2
三阶贝塞尔曲线
特点一:曲线通过始点和终点,并与特征多边形首末两边相切于始点和终点,中间点将曲线拉向自己。
特点二:平面离散点控制曲线的形状,改变一个离散点的坐标,曲线的形状将随之改变(点对曲线具有整体控制性)。
特点三:曲线落在特征多边形的凸包之内,它比特征多边形更趋于光滑。
特点四:贝塞尔曲线属于“平均通过”式曲线。
数据点: 指一条路径的起始点和终止点。
控制点:控制点决定了一条路径的弯曲轨迹。
premiere里面的贝塞尔曲线是什么?如何应用?
你知道Premiere里面的贝塞尔曲线吗?这个曲线有什么作用,如何使用呢?经常看到有人问贝塞尔曲线,下面就给大家分享一下什么是贝塞尔曲线,如何应用贝塞尔曲线。什么是贝塞尔曲线?贝塞尔曲线是可调节的曲线,通过节点,句柄调节线段,还可以删除。贝塞尔曲线的应用方法:1.打开PR软件,依次点击【新建序列】-选择【AVCHD1080i25(50i)】-点击【确定】。点击【序列】-【序列设置】,编辑模式选择【自定义】,帧大小为【1080*1080】,点击【确定】。2.将视频素材拖拉到时间轴轨道面板上,保持现有设置,点击鼠标右键选择【取消链接】,删除音频,用【剃刀工具】在两秒处点击,用【选择工具(V)】点击后半部分视频删除。3.先学习基础版本,关键帧调节。在开始位置设置横坐标为【911】,在00:00:00:07位置设置位置关键帧,在00:00:01:16位置设置横坐标为【220】,这是基础设置,视觉冲击力较木讷,不是很灵动。4.接下来是如何在关键帧上设置贝塞尔曲线点击第一个关键帧,右击选择【临时插值】-选择【连续贝塞尔曲线】,关键帧的图标从菱形变成沙漏型。5.下拉【位置】,将第二个关键帧右击选择【临时插值】-选择【连续贝塞尔曲线】。按住调节杠杆往下调节,速率值为【298.0/秒】,调节第二个关键帧杠杆。如下图。6.调节曲线的方法就是点击关键帧图标,出现蓝色杠杆,按住杠杆调节即可。画红色方块连接的地方尽量保持平滑,不能有高低差,使画面更灵活不突兀。以上就是premiere应用贝塞尔曲线的操作过程了,有一点复杂,需要多练习才能真正掌握。以上就是本文的全部内容,希望对大家的学习有所帮助,。-->