bezier曲線演算法實現
① 史上最全的貝塞爾曲線(Bezier)全解(一):初識貝塞爾曲線
作為一個有隻志向的碼農,除了知道一些基本的知識夠自己努力搬磚以外,還應該get一些更炫酷的技能,用更優雅的姿勢進行搬磚;想要實現一些十分炫酷的效果,貝塞爾曲線就必須進行一些研究了;最近一段時間,我對貝塞爾曲線進行了部分的研究,因此就打算寫貝塞爾曲線系列的文章來記錄自己的研究;
##規矩我都懂 !##
我明白,必須先上圖,要不然大家都沒興趣看下去先看比較簡單的,貝塞爾曲線的一階和二階的應用
看到二階的貝塞爾曲線有沒有感覺很眼熟,沒錯,360的下火箭彈射時候的小彈弓,還有滑動控制項的陰影提示;以前的時候很多小夥伴跟我說這要計算多少數據啊,完全沒辦法實現啊,現在有了貝塞爾曲線,可以很簡單的實現這一個功能;
不過完全不能這樣滿足啊,接下來還有更復雜一些的曲線 沒錯,這個就是三階的使用,有沒有感覺路線更加復雜,不過還好,使用貝塞爾去玩完全可以輕松實現;對了,還有一個心在沿著曲線移動,看到這里,小夥伴們肯定會想到滿屏幕的心在飛的場景,放心,這個我也實現了,在接下來的文章里,我會一一進行講解
##圖片看完了,現在簡單了解貝塞爾曲線 ##
Bézier curve(貝塞爾曲線)是應用於二維圖形應用程序的數學曲線。 曲線定義:起始點、終止點(也稱錨點)、控制點。通過調整控制點,貝塞爾曲線的形狀會發生變化。 1962年,法國數學家Pierre Bézier第一個研究了這種矢量繪制曲線的方法,並給出了詳細的計算公式,因此按照這樣的公式繪制出來的曲線就用他的姓氏來命名,稱為貝塞爾曲線。以下公式中:B(t)為t時間下 點的坐標;P0為起點,Pn為終點,Pi為控制點一階貝塞爾曲線(線段):
意義:由 P0 至 P1 的連續點, 描述的一條線段二階貝塞爾曲線(拋物線):
原理:由 P0 至 P1 的連續點 Q0,描述一條線段。由 P1 至 P2 的連續點 Q1,描述一條線段。由 Q0 至 Q1 的連續點 B(t),描述一條二次貝塞爾曲線。經驗:P1-P0為曲線在P0處的切線。
三階貝塞爾曲線:
通用公式:
利用貝塞爾曲線的這些特性,我們可以畫出很多炫酷的曲線,所以貝塞爾曲線還是值得我們去研究學習的;##但是這些完全記不住啊!!! ##沒關系,可以很負責的說,我也是!!!!!上面的曲線完全是來自[ http://blog.csdn.net/tianhai110/article/details/2203572 ] 所以,如果你的數學和我一樣是體育老師教的,就忘記這些吧,跟我一起看看android中是實現一條貝塞爾曲線的,android已經幫我們實現好了,剩下的就需要我們進行簡單使用,具體的使用,就看
[ 史上最全的貝塞爾曲線(Bezier)全解(二):Android中曲線的簡單繪制 ]
[ 史上最全的貝塞爾曲線(Bezier)全解(三):貝塞爾曲線實現滿屏愛心 ]
中講解最後附上源碼: https://github.com/sangxiaonian/BezierIntroce.git
② 求二次貝塞爾曲線 演算法實現
typedefstruct
{
floatx;
floaty;
}Point2D;
/*cp在此是四個元素的數組:
cp[0]為起點,或上圖中的P0
cp[1]為第一控制點,或上圖中的P1
cp[2]為第二控制點,或上圖中的P2
cp[3]為結束點,或上圖中的P3
t為參數值,0<=t<=1*/
Point2DPointOnCubicBezier(Point2D*cp,floatt)
{
floatax,bx,cx;floatay,by,cy;
floattSquared,tCubed;Point2Dresult;
/*計算多項式系數*/
cx=3.0*(cp[1].x-cp[0].x);
bx=3.0*(cp[2].x-cp[1].x)-cx;
ax=cp[3].x-cp[0].x-cx-bx;
cy=3.0*(cp[1].y-cp[0].y);
by=3.0*(cp[2].y-cp[1].y)-cy;
ay=cp[3].y-cp[0].y-cy-by;
/*計算t位置的點值*/
tSquared=t*t;
tCubed=tSquared*t;
result.x=(ax*tCubed)+(bx*tSquared)+(cx*t)+cp[0].x;
result.y=(ay*tCubed)+(by*tSquared)+(cy*t)+cp[0].y;
returnresult;
}
/*ComputeBezier以控制點cp所產生的曲線點,填入Point2D結構數組。
調用方必須分配足夠的空間以供輸出,<sizeof(Point2D)numberOfPoints>*/
voidComputeBezier(Point2D*cp,intnumberOfPoints,Point2D*curve)
{
floatdt;inti;
dt=1.0/(numberOfPoints-1);
for(i=0;i<numberOfPoints;i++)
curve[i]=PointOnCubicBezier(cp,i*dt);
}