【移動(dòng)應(yīng)用開發(fā)技術(shù)】瘋狂ios講義瘋狂連載之繪制曲線

【移動(dòng)應(yīng)用開發(fā)技術(shù)】瘋狂ios講義瘋狂連載之繪制曲線

Quartz2D提供了CGContextAddCurveToPoint()和CGContextAddQuadCurveToPoint()兩個(gè)函數(shù)向CGContextRef的當(dāng)前路徑上添加曲線前者用于添加貝塞爾曲線后者用于添加二次曲線。繪制貝塞爾曲線的示意圖如圖12.10所示。從圖12.10可以看出確定一條貝塞爾曲線需要4個(gè)點(diǎn)開始點(diǎn)、第一個(gè)控制點(diǎn)、第二個(gè)控制點(diǎn)和結(jié)束點(diǎn)。圖12.10繪制貝塞爾曲線示意圖CGContextAddCurveToPoint(CGContextRefc,floatcpx1,floatcpy1,floatcpx2,floatcpy2,floatx,floaty)方法則負(fù)責(zé)繪制從路徑的當(dāng)前點(diǎn)作為開始點(diǎn)到結(jié)束點(diǎn)x、y的貝塞爾曲線其中cpx1、cpy1定義第一個(gè)控制點(diǎn)的坐標(biāo)cpx2、cpy2定義第二個(gè)控制點(diǎn)的坐標(biāo)。繪制二次曲線的示意圖如圖12.11所示。從圖12.11可以看出確定一條二次曲線需要三個(gè)點(diǎn)開始點(diǎn)、控制點(diǎn)和結(jié)束點(diǎn)。CGContextAddQuadCurveToPoint(CGContextRefc,floatcpx,floatcpy,floatx,floaty)方法則負(fù)責(zé)繪制從路徑的當(dāng)前點(diǎn)作為開始點(diǎn)到結(jié)束點(diǎn)x、y的二次曲線其中cpx、cpy定義控制點(diǎn)的坐標(biāo)。圖12.11繪制二次曲線示意圖下面的程序使用了CGContextAddQuadCurveToPoint()函數(shù)方法繪制多條相連的曲線這樣就可添加花朵形狀的路徑。將下面的函數(shù)添加到FKContext.h函數(shù)庫(kù)中方便以后復(fù)用。添加花朵路徑的函數(shù)代碼如下。程序清單codes/12/12.2/CurveTest/CurveTest/FKContext.h上面的粗體字代碼每次都會(huì)計(jì)算二次曲線結(jié)束點(diǎn)、控制點(diǎn)的坐標(biāo)然后調(diào)用CGContextAddQuadCurveToPoint()函數(shù)即可添加二次曲線路徑。程序采用循環(huán)控制繪制多條前后相連的曲線這樣即可形成花瓣。實(shí)例使用曲線繪制多瓣花朵下面創(chuàng)建一個(gè)應(yīng)用程序來(lái)測(cè)試該添加花瓣曲線的函數(shù)。首先創(chuàng)建一個(gè)SingleViewApplication該Application包含一個(gè)應(yīng)用程序委托代理類、一個(gè)視圖控制器和配套的Storyboard界面設(shè)計(jì)文件。將該界面設(shè)計(jì)文件中最大的View改為使用自定義的FKCurveView類。該程序的控制器類幾乎無(wú)須修改只要重寫FKCurveView的drawRect:方法在該方法中調(diào)用FKContext.h中的方法來(lái)添加花瓣路徑然后采用不同的顏色填充該路徑即可。下面是該FKCurveView類的實(shí)現(xiàn)代碼。程序清單codes/12/12.2/CurveTest/CurveTest/FKCurveView.m程序中的三行粗體字代碼分別添加5瓣花朵路徑、6瓣花朵路徑、7瓣花朵路徑然后使用不同的顏色來(lái)填充這些路徑。注意到上面的程序并未在每次添加花朵路徑后立即關(guān)閉這也是允許的而且每次填充路徑時(shí)并不會(huì)再次填充前一次已經(jīng)填充過的路徑。這是因?yàn)橹挥贸绦蚶L制了CGContextRef當(dāng)前所包含的路徑系統(tǒng)會(huì)自動(dòng)清除已經(jīng)繪制的路徑。注意每次繪制完成后CGContextRef會(huì)自動(dòng)清除已經(jīng)繪制完成的