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

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

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