??作為一個(gè)有只志向的碼農(nóng),除了知道一些基本的知識(shí)夠自己努力搬磚以外,還應(yīng)該get一些更炫酷的技能,用更優(yōu)雅的姿勢(shì)進(jìn)行搬磚;想要實(shí)現(xiàn)一些十分炫酷的效果,貝塞爾曲線就必須進(jìn)行一些研究了;最近一段時(shí)間,我對(duì)貝塞爾曲線進(jìn)行了部分的研究,因此就打算寫貝塞爾曲線系列的文章來記錄自己的研究;
創(chuàng)新互聯(lián)從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元內(nèi)鄉(xiāng)做網(wǎng)站,已為上家服務(wù),為內(nèi)鄉(xiāng)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792
##規(guī)矩我都懂 !##
我明白,必須先上圖,要不然大家都沒興趣看下去先看比較簡(jiǎn)單的,貝塞爾曲線的一階和二階的應(yīng)用
??看到二階的貝塞爾曲線有沒有感覺很眼熟,沒錯(cuò),360的下火箭彈射時(shí)候的小彈弓,還有滑動(dòng)控件的陰影提示;以前的時(shí)候很多小伙伴跟我說這要計(jì)算多少數(shù)據(jù)啊,完全沒辦法實(shí)現(xiàn)啊,現(xiàn)在有了貝塞爾曲線,可以很簡(jiǎn)單的實(shí)現(xiàn)這一個(gè)功能;
?不過完全不能這樣滿足啊,接下來還有更復(fù)雜一些的曲線 ?沒錯(cuò),這個(gè)就是三階的使用,有沒有感覺路線更加復(fù)雜,不過還好,使用貝塞爾去玩完全可以輕松實(shí)現(xiàn);對(duì)了,還有一個(gè)心在沿著曲線移動(dòng),看到這里,小伙伴們肯定會(huì)想到滿屏幕的心在飛的場(chǎng)景,放心,這個(gè)我也實(shí)現(xiàn)了,在接下來的文章里,我會(huì)一一進(jìn)行講解
##圖片看完了,現(xiàn)在簡(jiǎn)單了解貝塞爾曲線 ##
Bézier curve(貝塞爾曲線)是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。 曲線定義：起始點(diǎn)、終止點(diǎn)（也稱錨點(diǎn)）、控制點(diǎn)。通過調(diào)整控制點(diǎn)，貝塞爾曲線的形狀會(huì)發(fā)生變化。 1962年，法國(guó)數(shù)學(xué)家Pierre Bézier第一個(gè)研究了這種矢量繪制曲線的方法，并給出了詳細(xì)的計(jì)算公式，因此按照這樣的公式繪制出來的曲線就用他的姓氏來命名，稱為貝塞爾曲線。以下公式中：B(t)為t時(shí)間下 點(diǎn)的坐標(biāo)；P0為起點(diǎn),Pn為終點(diǎn),Pi為控制點(diǎn)一階貝塞爾曲線(線段)： ?
意義：由 P0 至 P1 的連續(xù)點(diǎn)， 描述的一條線段二階貝塞爾曲線(拋物線)：
原理：由 P0 至 P1 的連續(xù)點(diǎn) Q0，描述一條線段。由 P1 至 P2 的連續(xù)點(diǎn) Q1，描述一條線段。由 Q0 至 Q1 的連續(xù)點(diǎn) B(t)，描述一條二次貝塞爾曲線。經(jīng)驗(yàn)：P1-P0為曲線在P0處的切線。
三階貝塞爾曲線：
? ?通用公式：?
利用貝塞爾曲線的這些特性,我們可以畫出很多炫酷的曲線,所以貝塞爾曲線還是值得我們?nèi)パ芯繉W(xué)習(xí)的;##但是這些完全記不住啊!!! ##沒關(guān)系,可以很負(fù)責(zé)的說,我也是!!!!!上面的曲線完全是來自[ ] 所以,如果你的數(shù)學(xué)和我一樣是體育老師教的,就忘記這些吧,跟我一起看看android中是實(shí)現(xiàn)一條貝塞爾曲線的,android已經(jīng)幫我們實(shí)現(xiàn)好了,剩下的就需要我們進(jìn)行簡(jiǎn)單使用,具體的使用,就看
[ 史上最全的貝塞爾曲線(Bezier)全解(二):Android中曲線的簡(jiǎn)單繪制 ]?
[ 史上最全的貝塞爾曲線(Bezier)全解(三):貝塞爾曲線實(shí)現(xiàn)滿屏愛心 ]
中講解最后附上源碼:
用貝塞爾曲線畫就可以了
Private Type POINTAPI
x As Long
y As Long
End Type
Private Declare Function PolyBezierTo Lib "gdi32.dll " (ByVal hdc As Long, lppt As POINTAPI, ByVal cCount As Long) As Long
Private Sub Form_Paint()
Dim pts(0 To 6) As POINTAPI
'set the co?rdinates
pts(0).x = 22: pts(0).y = 33
pts(1).x = 66: pts(1).y = 55
pts(2).x = 177: pts(2).y = 88
pts(3).x = 199: pts(3).y = 111
pts(4).x = 299: pts(4).y = 222
pts(5).x = 80: pts(5).y = 333
PolyBezierTo Me.hdc, pts(0), 6
End Sub
平均線 ？？是個(gè)什么線？？？？求出平均值后話直線嗎？
那就lineto好了
Private Type POINTAPI
x As Long
y As Long
End Type
Private Declare Function PolyBezierTo Lib "gdi32.dll " (ByVal hdc As Long, lppt As POINTAPI, ByVal cCount As Long) As Long
Private Sub Form_Paint()
Dim pts(0 To 6) As POINTAPI
Dim pt(0 To 6) As POINTAPI
'set the co?rdinates
pts(0).x = 22: pts(0).y = 33
pts(1).x = 66: pts(1).y = 55
pts(2).x = 177: pts(2).y = 88
pts(3).x = 199: pts(3).y = 111
pts(4).x = 299: pts(4).y = 222
pts(5).x = 80: pts(5).y = 333
For n = 1 To 6
pt(n).x = (pts(n).x + pts(n - 1).x) / 2
pt(n).y = (pts(n).y + pts(n - 1).y) / 2
Next n
PolyBezierTo Me.hdc, pt(0), 6
PolyBezierTo Me.hdc, pts(0), 6
End Sub
Bézier curve(貝塞爾曲線)是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。
曲線定義：起始點(diǎn)、終止點(diǎn)（也稱錨點(diǎn)）、控制點(diǎn)。通過調(diào)整控制點(diǎn)，貝塞爾曲線的形狀會(huì)發(fā)生變化。
1962年，法國(guó)數(shù)學(xué)家Pierre Bézier第一個(gè)研究了這種矢量繪制曲線的方法，并給出了詳細(xì)的計(jì)算公式，因此按照這樣的公式繪制出來的曲線就用他的姓氏來命名，稱為貝塞爾曲線。
貝塞爾曲線為計(jì)算機(jī)矢量圖形學(xué)奠定了基礎(chǔ)。
它的主要意義在于無論是直線或曲線都能在數(shù)學(xué)上予以描述。
拋物線的三切線定理：
設(shè)P0、P02、P2是一條拋物線上順序三個(gè)不同的點(diǎn)。過P0和P2點(diǎn)的兩切線交于P1點(diǎn)，在P02點(diǎn)的切線交P0P1和P2P1于P01和P11，則如下比例成立：
當(dāng)P0，P2固定，引入?yún)?shù)t，令上述比值為t:(1-t)，即有：
t從0變到1，第一、二式就分別表示控制二邊形的第一、二條邊，它們是兩條 一次Bezier曲線 。將一、二式代入第三式得：
依次類推，
由四個(gè)控制點(diǎn)定義的三次Bezier曲線P03可被定義為分別由(P0,P1,P2)和(P1,P2,P3)確定的兩條二次Bezier曲線的線性組合。
即由 (n+1) 個(gè)控制點(diǎn)Pi(i=0,1,...,n)定義的n次Bezier曲線P0n可被定義為分別由 前、后n個(gè)控制點(diǎn) 定義的 兩條(n-1)次 Bezier曲線P0n-1與P1n-1的線性組合：
由此得到Bezier曲線的遞推計(jì)算公式：
以下公式中：B(t)為t時(shí)間下點(diǎn)的坐標(biāo)；P0為起點(diǎn)，Pn為終點(diǎn)，Pi為控制點(diǎn)
由 P0 至 P1 的連續(xù)點(diǎn)P01，描述的一條線段：
transition-timing-function 規(guī)定過渡效果的時(shí)間曲線為貝塞爾曲線
transition: all 2s cubic-bezier( p1x, p1y, p2x, p2y )
項(xiàng)目預(yù)覽地址：
用Circle 畫圓 圓弧 橢圓 都可以
具體參照下面的詳細(xì)說明
Circle(1000,1000),500,8,-6,-3
1000,1000,圓心坐標(biāo)
500,半徑
后面分別代表起始角,終止角,長(zhǎng)短軸比率
好吧,詳細(xì)點(diǎn),就把Circle方法都說一遍
在對(duì)象上畫圓、橢圓或弧。
語法
object.Circle [Step] (x, y), radius, [color, start, end, aspect]
Circle 方法的語法有如下的對(duì)象限定符和部分：
部分 描述
object 可選的。 對(duì)象表達(dá)式，其值為“應(yīng)用于”列表中的對(duì)象。如果object 省略，具有焦點(diǎn)的窗體作為object。
Step 可選的。關(guān)鍵字 ，指定圓、橢圓或弧的中心，它們相對(duì)于當(dāng)前 object 的 CurrentX 和 CurrentY 屬性提供的坐標(biāo)。
(x, y) 必需的。 Single （單精度浮點(diǎn)數(shù)），圓、橢圓或弧的中心坐標(biāo)。object 的 ScaleMode 屬性決定了使用的度量單位。
radius 必需的。Single （單精度浮點(diǎn)數(shù)），圓、橢圓或弧的半徑。 object 的 ScaleMode 屬性決定了使用的度量單位。
color 可選的。Long （長(zhǎng)整型數(shù)），圓的輪廓的 RGB 顏色。如果它被省略，則使用 ForeColor 屬性值?？捎?RGB 函數(shù)或 QBColor 函數(shù)指定顏色。
start, end 可選的。 Single （單精度浮點(diǎn)數(shù)），當(dāng)弧、或部分圓或橢圓畫完以后，start 和 end 指定（以弧度為單位）弧的起點(diǎn)和終點(diǎn)位置。其范圍從 -2 pi 到 2 pi 。起點(diǎn)的缺省值是0; 終點(diǎn)的缺省值是2 * pi。
aspect 可選的。 Single （單精度浮點(diǎn)數(shù)），圓的縱橫尺寸比。缺省值為 1.0，它在如何屏幕上都產(chǎn)生一個(gè)標(biāo)準(zhǔn)圓（非橢圓）。
說明
想要填充圓，使用圓或橢圓所屬對(duì)象的 FillColor 和 FillStyle 屬性。只有封閉的圖形才能填充。封閉圖形包括圓、橢圓、或扇形。
畫部分圓或橢圓時(shí)，如果 start 為負(fù)，Circle 畫一半徑到 start，并將角度處理為正的；如果 end 為負(fù)，Circle 畫一半徑到 end，并將角度處理為正的。Circle 方法總是逆時(shí)針（正）方向繪圖。
畫圓、橢圓或弧時(shí)線段的粗細(xì)取決于 DrawWidth 屬性值。在背景上畫圓的方法取決于 DrawMode 和 DrawStyle 屬性值。
畫角度為 0 的扇形時(shí)，要畫出一條半徑（向右畫一水平線段），這時(shí)給 start 規(guī)定一很小的負(fù)值，不要給 0。
.可以省略語法中間的某個(gè)參數(shù)，但不能省略分隔參數(shù)的逗號(hào)。您指定的最后一個(gè)參數(shù)后面的逗號(hào)是可以省略的。
Circle 執(zhí)行時(shí)，CurrentX 和 CurrentY 屬性被參數(shù)設(shè)置為中心點(diǎn)。
這個(gè)方法不能用在 With匛nd With 語句塊中。
--------------------------------------------------------------------------------
Circle 方法示例
這個(gè)示例用Circle 方法在窗體中央畫許多同心圓。要運(yùn)行這個(gè)示例，將此代碼放入窗體的 General 部分。按 F5 并單擊窗體。
Sub Form_Click ()
Dim CX, CY, Radius, Limit ' Declare variable.
ScaleMode = 3 ' 以像素為單位。
CX = ScaleWidth / 2 ' X 位置。
CY = ScaleHeight / 2 ' Y 位置。
If CX CY Then Limit = CY Else Limit = CX
For Radius = 0 To Limit ' 半徑。
Circle (CX, CY), Radius,RGB(Rnd * 255, Rnd * 255, Rnd * 255)
Next Radius
End Sub
--------------------------------------------------------------------------------
void CBSplineView::bezier(CPoint *pp, int n)
{//畫Bezier曲線
int x,y,i,j,k=100;
double t,t1,u,v;
double temp,temp1,temp2,bi;
CClientDC dc(this);
OnPrepareDC(dc);
t=1.0/k;
dc.MoveTo(pp[0]);
for(j=1;jk;j++)
{
t1=j*t;
u=t1;
v=1-u;
x=0;
y=0;
for(i=0;i=n;i++)
{
temp=double(fac(n)/fac(i)/fac(n-i));
temp1=powi(u,i);
temp2=powi(v,n-i);
bi=temp*temp1*temp2;
x=x+bi*pp[i].x;
y=y+bi*pp[i].y;
}
dc.LineTo(x,y);
}
dc.LineTo(pp[n]);
}
long CBSplineView::fac(int m)
{//求m的階乘
int i;
long temp=1;
if(m==0)
return 1;
else
{
for(i=2;i=m;i++)
temp*=i;
}
return temp;
}
double CBSplineView::powi(double v, int k)
{//求解v的k次冪
double temp=1.0;
if(k==0||v==0)
return 1;
else
{
for(int i=1;i=k;i++)
temp*=v;
}
return temp;
}
曲線通過關(guān)鍵點(diǎn)控制，可以通過選取關(guān)鍵點(diǎn)并拖拽來改變曲線。
mouse點(diǎn)擊的HitTest:
通用方法:
用描畫的方法把Bezier畫在MemoryDC里, 得到測(cè)試點(diǎn)的像素值,以判斷是否在線上.
(通過剪裁區(qū)來減少描畫范圍)
應(yīng)該是這樣吧!(*n_ n*)
Line,Circle,Pset,Cls.
輔助命令：RGB,QBColor.
API中繪圖命令相當(dāng)多。
1.設(shè)定圖素
SetPixel
GetPixel
2.畫線
LineTo 畫直線。
Polyline和PolylineTo 畫一系列相連的直線。
PolyPolyline 畫多組相連的線。
Arc 畫橢圓線。
PolyBezier和PolyBezierTo 畫貝塞爾曲線。
ArcTo和AngleArc 畫橢圓線。
PolyDraw 畫一系列相連的線以及貝塞爾曲線
3.既畫線也填入所畫圖形的封閉區(qū)域的函數(shù),邊界框函數(shù)
Rectangle 畫矩形。
Ellipse 畫橢圓。
RoundRect 畫帶圓角的矩形。
Pie 畫橢圓的一部分，使其看起來像一個(gè)扇形。
Chord 畫橢圓的一部分，以呈弓形。
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
SetPixel函數(shù)在指定的x和y坐標(biāo)以特定的顏色設(shè)定圖素：
SetPixel (hdc, x, y, crColor) ;
如同在任何繪圖函數(shù)中一樣，第一個(gè)參數(shù)是設(shè)備內(nèi)容的句柄。第二個(gè)和第三個(gè)參數(shù)指明了坐標(biāo)位置。通常要獲得窗口顯示區(qū)域的設(shè)備內(nèi)容，并且x和y相對(duì)于該顯示區(qū)域的左上角。最后一個(gè)參數(shù)是COLORREF型態(tài)指定了顏色。如果在函數(shù)中指定的顏色視訊顯示器不支持，則函數(shù)將圖素設(shè)定為最接近的純色并從函數(shù)傳回該值。
GetPixel函數(shù)傳回指定坐標(biāo)處的圖素顏色：
crColor = GetPixel (hdc, x, y) ;
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
畫一條直線，必須呼叫兩個(gè)函數(shù)。第一個(gè)函數(shù)指定了線的開始點(diǎn)，第二個(gè)函數(shù)指定了線的終點(diǎn)：
MoveToEx (hdc, xBeg, yBeg, NULL) ;
LineTo (hdc, xEnd, yEnd) ;
MoveToEx實(shí)際上不會(huì)畫線，它只是設(shè)定了設(shè)備內(nèi)容的「目前位置」屬性。然后LineTo函數(shù)從目前的位置到它所指定的點(diǎn)畫一條直線。目前位置只是用于其它幾個(gè)GDI函數(shù)的開始點(diǎn)。在內(nèi)定的設(shè)備內(nèi)容中，目前位置最初設(shè)定在點(diǎn)
（0,0）.如果在呼叫LineTo之前沒有設(shè)定目前位置，那么它將從顯示區(qū)域的左上角開始畫線。
當(dāng)您要將數(shù)組中的點(diǎn)連接成線時(shí)，使用Polyline函數(shù)要簡(jiǎn)單得多
Polyline (hdc, apt, 5) ;
最后一個(gè)參數(shù)是點(diǎn)的數(shù)目。我們還可以使用(sizeof (apt) / sizeof (POINT))來表示這個(gè)值。Polyline與一個(gè)MoveToEx函數(shù)后面加幾個(gè)LineTo函數(shù)的效果相同，但是，Polyline既不使用也不改變目前位置。PolylineTo有些不同，這個(gè)函數(shù)使用目前位置作為開始點(diǎn)，并將目前位置設(shè)定為最后一根線的終點(diǎn)
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Rectangle (hdc, xLeft, yTop, xRight, yBottom) ;
點(diǎn)(xLeft, yTop)是矩形的左上角，(xRight, yBottom)是矩形的右下角。用函數(shù)Rectangle畫出的圖形如圖5-6所示，矩形的邊總是平行于顯示器的水平和垂直邊
重慶分公司
重慶分公司
