瘋狂ios講義之使用路徑

正如前面提到的Quartz 2D只提供了繪制矩形、橢圓的函數并沒有直接提供繪制圓角矩形、三角形等幾何圖形的函數。為了繪制更復雜的圖形必須啟用路徑。

表12.4列出了Quartz 2D為創建路徑提供的函數。

表12.4創建路徑的相關函數

除此之外Quartz 2D還提供了如下函數來獲取當前CGContextRef所包含的路徑信息。

bool CGContextIsPathEmpty(CGContextRef c)該函數用于判斷指定CGContextRef包含的路徑是否為空。

CGPoint CGContextGetPathCurrentPoint(CGContextRef c)該函數用于返回指定CGContextRef包含的路徑的當前點。

CGRect CGContextGetPathBoundingBox(CGContextRef c)該函數用于返回指定CGContextRef中能完整包圍所有路徑的最小矩形。

bool CGContextPathContainsPoint(CGContextRef context, CGPoint point, CGPathDrawingMode mode)該函數判斷指定CGContextRef包含的路徑按指定繪制模式進行繪制時是否需要繪制point點。

為了在Canvas中使用路徑可按如下步驟進行。

調用CGContextBeginPath()函數開始定義路徑。

調用表12.4所示的各種函數添加子路徑。

如果路徑添加完成調用CGContextClosePath()函數關閉路徑。

調用CGContextDrawPath()、CGContextEOFillPath()、CGContextFillPath()或CGContextStrokePath()函數來填充路徑或繪制路徑邊框即可。在這些方法中第一個方法可以代替后面的幾個方法第一個方法指定使用特定的模式來繪制圖形它支持如下幾種繪制方式。

kCGPathFill指定填充路徑。相當于CGContextFillPath()函數。

kCGPathEOFill指定采用even-odd模式填充路徑。相當于CGContextEOFillPath()函數。

kCGPathStroke指定只繪制路徑。相當于CGContextStrokePath()函數。

kCGPathFillStroke指定既繪制路徑也填充路徑。如果采用這種繪制方式必須使用該函數。

kCGPathEOFillStroke指定既繪制路徑也采用even-odd模式填充路徑。如果采用這種繪制方式必須使用該函數。

通過上面介紹的CGContextAddArc()函數我們可以繪制扇形下面的程序代碼使用循環繪制了10個扇形而且這10個扇形的透明度逐漸降低。首先創建一個Single View Application該Application包含一個應用程序委托代理類、一個視圖控制器和配套的Storyboard界面設計文件。將該界面設計文件中最大的View改為使用自定義的FKArcView類。該程序的控制器類幾乎無須修改只要重寫FKArcView的drawRect:方法在該方法中使用路徑繪制扇形即可。

下面是FKArcView類的實現代碼。

程序清單codes/12/12.2/AddArcTest/AddArcTest/FKArcView.m

面程序中的粗體字代碼繪制了從M_PI * 1.5角度12點方向開始到M_PI角度9點方向結束的扇形——在該繪圖API中0度代表X軸方向也就是3點方向。需要指出的是關于CGContextAddArc()函數的最后一個參數官方文檔介紹該參數為0代表逆時針但筆者運行時看到的效果是0代表順指針可參見下面的運行效果。

編譯、運行該程序可以看到如圖12.7所示的效果。

從上面程序的運行結果來看相信讀者對CGContextAddArc (CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)函數的用法已經比較清楚該方法的第2、3個參數指定圓弧的圓心第4個參數用于設置圓弧的半徑第5、6個參數則用于設置圓弧的開始角度、結束角度最后一個參數用于設置是否順時針旋轉。

可能有讀者對CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2, CGFloat radius)函數感到疑惑該方法也是添加一段圓弧路徑。確定這段圓弧的方式是假設從當前點到P1x1、y1繪制一條線條再從 P1x1、y1到P2x2、y2繪制一條線條CGContextAddArcToPoint()則繪制一條同時與上面兩條線條相切且半徑為radius的圓弧。該函數方法的示意圖如圖12.8所示。

圖12.8CGContextAddArcToPoint()函數的示意

借助CGContextAddArcToPoint()和CGContextAddLineToPoint()函數可以非常容易地實現添加圓角矩形路徑的方法所謂圓角矩形就是在矩形的每個角都繪制一段90°的圓弧。除此之外還有CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)函數用于把繪制點移動到指定位置借助這些方法還可以繪制任意的多角星。

下面的程序代碼將會開發兩個自定義函數一個用于添加圓角矩形一個用于添加多角星。程序代碼如下。

程序清單codes/12/12.2/PathTest/FKContext.h

上面兩個函數都沒有執行任何繪制操作它們都只是向當前CGContextRef中添加路徑第一個函數用于添加一個圓角矩形路徑第二個函數用于添加一個多角星路徑。

上面這個函數庫與項目無關該函數庫中包含的兩個函數完全可以在任何項目中復用。因此如果讀者以后的項目需要繪制圓角矩形、多角星只要將該文件復制到項目中并導入該函數庫即可調用這兩個函數添加路徑。

實例繪制任意多角星

下面創建一個應用來繪制圓角矩形和多角星。首先創建一個Single View Application該Application包含一個應用程序委托代理類、一個視圖控制器和配套的Storyboard界面設計文件。將該界面設計文件中最大的View改為使用自定義的FKPathView類。該程序的控制器類幾乎無須修改只要重寫FKPathView的drawRect:方法在該方法中調用FKContext.h中的方法來添加圓角矩形、多角星路徑然后根據需要采用不同的方式繪制這些路徑即可。

下面是FKPathView類的實現代碼。

程序清單codes/12/12.2/PathTest/FKPathView.m

上面程序的第一行粗體字代碼導入了FKContext.h文件接下來的粗體字代碼多次調用了CGContextAddRoundRect()函數和CGContextAddStar()函數來添加圓角矩形和多角星。編譯、運行該程序即可看到如圖12.9所示的效果。

————本文節選自《瘋狂ios講義上》