使用UIBezierPath類可以創(chuàng)建基于矢量的路徑，這個(gè)類在UIKit中。此類是Core Graphics框架關(guān)于path的一個(gè)封裝。使用此類可以定義簡(jiǎn)單的形狀，如橢圓或者矩形，或者有多個(gè)直線和曲線段組成的形狀。
1.Bezier Path 基礎(chǔ)
UIBezierPath對(duì)象是CGPathRef數(shù)據(jù)類型的封裝。path如果是基于矢量形狀的，都用直線和曲線段去創(chuàng)建。我們使用直線段去創(chuàng)建矩形和多邊形，使用曲線段去創(chuàng)建?。╝rc），圓或者其他復(fù)雜的曲線形狀。每一段都包括一個(gè)或者多個(gè)點(diǎn)，繪圖命令定義如何去詮釋這些點(diǎn)。每一個(gè)直線段或者曲線段的結(jié)束的地方是下一個(gè)的開(kāi)始的地方。每一個(gè)連接的直線或者曲線段的集合成為subpath。一個(gè)UIBezierPath對(duì)象定義一個(gè)完整的路徑包括一個(gè)或者多個(gè)subpaths。
創(chuàng)建和使用一個(gè)path對(duì)象的過(guò)程是分開(kāi)的。創(chuàng)建path是第一步，包含一下步驟：
（1）創(chuàng)建一個(gè)Bezier path對(duì)象。
（2）使用方法moveToPoint:去設(shè)置初始線段的起點(diǎn)。
（3）添加line或者curve去定義一個(gè)或者多個(gè)subpaths。
（4）改變UIBezierPath對(duì)象跟繪圖相關(guān)的屬性。
例如，我們可以設(shè)置stroked path的屬性lineWidth和lineJoinStyle。也可以設(shè)置filled path的屬性u(píng)sesEvenOddFillRule。
當(dāng)創(chuàng)建path，我們應(yīng)該管理path上面的點(diǎn)相對(duì)于原點(diǎn)（0，0），這樣我們?cè)陔S后就可以很容易的移動(dòng)path了。為了繪制path對(duì)象，我們要用到stroke和fill方法。這些方法在current graphic context下渲染path的line和curve段。
2、使用UIBezierPath創(chuàng)建多邊形---在path下面添加直線條形成多邊形
多邊形是一些簡(jiǎn)單的形狀,這些形狀是由一些直線線條組成，我們可以用moveToPoint: 和 addLineToPoint:方法去構(gòu)建。
方法moveToPoint:設(shè)置我們想要?jiǎng)?chuàng)建形狀的起點(diǎn)。從這點(diǎn)開(kāi)始，我們可以用方法addLineToPoint:去創(chuàng)建一個(gè)形狀的線段。
我們可以連續(xù)的創(chuàng)建line，每一個(gè)line的起點(diǎn)都是先前的終點(diǎn)，終點(diǎn)就是指定的點(diǎn)。
下面的代碼描述了如何用線段去創(chuàng)建一個(gè)五邊形。第五條線通過(guò)調(diào)用closePath方法得到的，它連接了最后一個(gè)點(diǎn)（0，40）和第一個(gè)點(diǎn)（100，0）
說(shuō)明：closePath方法不僅結(jié)束一個(gè)shape的subpath表述，它也在最后一個(gè)點(diǎn)和第一個(gè)點(diǎn)之間畫(huà)一條線段，如果我們畫(huà)多邊形的話，這個(gè)一個(gè)便利的方法我們不需要去畫(huà)最后一條線。
- (void)drawRect:(CGRect)rect
{
UIColor?*color?=?[UIColor redColor];
[color set];//設(shè)置線條顏色
UIBezierPath*?aPath?=?[UIBezierPath bezierPath];
aPath.lineWidth?=?5.0;
aPath.lineCapStyle?=?kCGLineCapRound;//線條拐角
aPath.lineJoinStyle?=?kCGLineCapRound;//終點(diǎn)處理
//?Set the starting point of the shape.
[aPath moveToPoint:CGPointMake(100.0,?0.0)];
//?Draw the lines
[aPath addLineToPoint:CGPointMake(200.0,?40.0)];
[aPath addLineToPoint:CGPointMake(160,?140)];
[aPath addLineToPoint:CGPointMake(40.0,?140)];
[aPath addLineToPoint:CGPointMake(0.0,?40.0)];
[aPath closePath];//第五條線通過(guò)調(diào)用closePath方法得到的
[aPath stroke];//Draws line?根據(jù)坐標(biāo)點(diǎn)連線
}
運(yùn)行的結(jié)果如下圖：
如果修改最后一句代碼：[aPath fill];
運(yùn)行結(jié)果就如下：
3、使用UIBezierPath創(chuàng)建矩形
使用這個(gè)方法即可：+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect
- (void)drawRect:(CGRect)rect
{
UIColor?*color?=?[UIColor redColor];
[color set];//設(shè)置線條顏色
UIBezierPath*?aPath?=?[UIBezierPath bezierPathWithRect:CGRectMake(20,?20,?100,?50)];
aPath.lineWidth?=?5.0;
aPath.lineCapStyle?=?kCGLineCapRound;//線條拐角
aPath.lineJoinStyle?=?kCGLineCapRound;//終點(diǎn)處理
[aPath stroke];
}
4、使用UIBezierPath創(chuàng)建圓形或者橢圓形
使用這個(gè)方法即可：+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect
這個(gè)方法根據(jù)傳入的rect矩形參數(shù)繪制一個(gè)內(nèi)切曲線。
當(dāng)傳入的rect是一個(gè)正方形時(shí)，繪制的圖像是一個(gè)內(nèi)切圓；當(dāng)傳入的rect是一個(gè)長(zhǎng)方形時(shí)，繪制的圖像是一個(gè)內(nèi)切橢圓。
5、使用UIBezierPath創(chuàng)建一段弧線
使用這個(gè)方法：+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
其中的參數(shù)分別指定：這段圓弧的中心，半徑，開(kāi)始角度，結(jié)束角度，是否順時(shí)針?lè)较颉?br>
下圖為弧線的參考系。
- (void)drawRect:(CGRect)rect
{
UIColor?*color?=?[UIColor redColor];
[color set];//設(shè)置線條顏色
UIBezierPath*?aPath?=?[UIBezierPath bezierPathWithArcCenter:CGPointMake(150,?150)
radius:75
startAngle:0
endAngle:DEGREES_TO_RADIANS(135)
clockwise:YES];
aPath.lineWidth?=?5.0;
aPath.lineCapStyle?=?kCGLineCapRound;//線條拐角
aPath.lineJoinStyle?=?kCGLineCapRound;//終點(diǎn)處理
[aPath stroke];
}
結(jié)果如圖：
6、UIBezierPath類提供了添加二次貝塞爾曲線和三次貝塞爾曲線的支持。
曲線段在當(dāng)前點(diǎn)開(kāi)始，在指定的點(diǎn)結(jié)束。曲線的形狀有開(kāi)始點(diǎn)，結(jié)束點(diǎn)，一個(gè)或者多個(gè)控制點(diǎn)的切線定義。下圖顯示了兩種曲線類型的相似，以及控制點(diǎn)和curve形狀的關(guān)系。
(1) ?繪制二次貝塞爾曲線
使用到這個(gè)方法：- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
如下圖，為控制點(diǎn)與開(kāi)始結(jié)束點(diǎn)之間的關(guān)系。
- (void)drawRect:(CGRect)rect
{
UIColor?*color?=?[UIColor redColor];
[color set];//設(shè)置線條顏色
UIBezierPath*?aPath?=?[UIBezierPath bezierPath];
aPath.lineWidth?=?5.0;
aPath.lineCapStyle?=?kCGLineCapRound;//線條拐角
aPath.lineJoinStyle?=?kCGLineCapRound;//終點(diǎn)處理
[aPath moveToPoint:CGPointMake(20,?100)];
[aPath addQuadCurveToPoint:CGPointMake(120,?100)?controlPoint:CGPointMake(70,?0)];
[aPath stroke];
}
結(jié)果如圖所示：
(2) ?繪制三次貝塞爾曲線
使用如下方法： - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
- (void)drawRect:(CGRect)rect
{
UIColor?*color?=?[UIColor redColor];
[color set];//設(shè)置線條顏色
UIBezierPath*?aPath?=?[UIBezierPath bezierPath];
aPath.lineWidth?=?5.0;
aPath.lineCapStyle?=?kCGLineCapRound;//線條拐角
aPath.lineJoinStyle?=?kCGLineCapRound;//終點(diǎn)處理
[aPath moveToPoint:CGPointMake(20,?50)];
[aPath addCurveToPoint:CGPointMake(200,?50)?controlPoint1:CGPointMake(110,?0)?controlPoint2:CGPointMake(110,?100)];
[aPath stroke];
}
結(jié)果：
7. ?使用Core Graphics函數(shù)去修改path。
UIBezierPath類只是CGPathRef數(shù)據(jù)類型和path繪圖屬性的一個(gè)封裝。雖然通常我們可以用UIBezierPath類的方法去添加直線段和曲線段，UIBezierPath類還提供了一個(gè)屬性CGPath，我們可以用來(lái)直接修改底層的path data type。如果我們希望用Core Graphics 框架函數(shù)去創(chuàng)建path，則我們要用到此屬性。
有兩種方法可以用來(lái)修改和UIBezierPath對(duì)象相關(guān)的path。可以完全的使用Core Graphics函數(shù)去修改path，也可以使用Core Graphics函數(shù)和UIBezierPath函數(shù)混合去修改。第一種方法在某些方面相對(duì)來(lái)說(shuō)比較容易。我們可以創(chuàng)建一個(gè)CGPathRef數(shù)據(jù)類型，并調(diào)用我們需要修改path信息的函數(shù)。
下面的代碼就是賦值一個(gè)新的CGPathRef給UIBezierPath對(duì)象。
// Create the path data
CGMutablePathRef cgPath = CGPathCreateMutable();
CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(0, 0, 300, 300));
CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(50, 50, 200, 200));
// Now create the UIBezierPath object
UIBezierPath* aPath = [UIBezierPath bezierPath];
aPath.CGPath = cgPath;
aPath.usesEvenOddFillRule = YES;
// After assigning it to the UIBezierPath object, you can release
// your CGPathRef data type safely.
CGPathRelease(cgPath);
如果我們使用Core Graphics函數(shù)和UIBezierPath函數(shù)混合方法，我們必須小心的移動(dòng)path 信息在兩者之間。因?yàn)閁IBezierPath類擁有自己底層的CGPathRef data type，我們不能簡(jiǎn)單的檢索該類型并直接的修改它。相反，我們應(yīng)該生成一個(gè)副本，然后修改此副本，然后賦值此副本給CGPath屬性，如下代碼：
Mixing Core Graphics andUIBezierPathcalls
UIBezierPath*? ? aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 300, 300)];
// Get the CGPathRef and create a mutable version.
CGPathRef cgPath = aPath.CGPath;
CGMutablePathRef? mutablePath = CGPathCreateMutableCopy(cgPath);
// Modify the path and assign it back to the UIBezierPath object
CGPathAddEllipseInRect(mutablePath, NULL, CGRectMake(50, 50, 200, 200));
aPath.CGPath = mutablePath;
// Release both the mutable copy of the path.
CGPathRelease(mutablePath);
8.rendering（渲染）Bezier Path對(duì)象的內(nèi)容。
當(dāng)創(chuàng)建一個(gè)UIBezierPath對(duì)象之后，我們可以使用它的stroke和fill方法在current graphics context中去渲染它。在調(diào)用這些方法之前，我們要進(jìn)行一些其他的任務(wù)去確保正確的繪制path。
使用UIColor類的方法去stroke和fill想要的顏色。
設(shè)置形狀在目標(biāo)視圖中的位置。如果我們創(chuàng)建的path相對(duì)于原點(diǎn)（0，0），則我們可以給current drawing context應(yīng)用一個(gè)適當(dāng)?shù)腶ffie transform。例如，我想drawing一個(gè)形狀起始點(diǎn)在（0，0），我可以調(diào)用函數(shù)CGContextTranslateCTM,并指定水平和垂直方向的translation值為10。調(diào)整graphic context相對(duì)于調(diào)整path對(duì)象的points是首選的方法，因?yàn)槲覀兛梢院苋菀椎谋４婧统蜂N先前的graphics state。
更新path對(duì)象的drawing 屬性。當(dāng)渲染path時(shí)，UIBezierPath實(shí)例的drawing屬性會(huì)覆蓋graphics context下的屬性值。
下面的代碼實(shí)現(xiàn)了在一個(gè)自定義view中實(shí)現(xiàn)drawRect：方法中去繪制一個(gè)橢圓。橢圓邊框矩形的左上角位于視圖坐標(biāo)系統(tǒng)的點(diǎn)（50，50）處。
Drawing a path in a view
- (void)drawRect:(CGRect)rect
{
// Create an oval shape to draw.
UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:
CGRectMake(0, 0, 200, 100)];
// Set the render colors
[[UIColor blackColor] setStroke];
[[UIColor redColor] setFill];
CGContextRef aRef = UIGraphicsGetCurrentContext();
// If you have content to draw after the shape,
// save the current state before changing the transform
//CGContextSaveGState(aRef);
// Adjust the view's origin temporarily. The oval is
// now drawn relative to the new origin point.
CGContextTranslateCTM(aRef, 50, 50);
// Adjust the drawing options as needed.
aPath.lineWidth = 5;
// Fill the path before stroking it so that the fill
// color does not obscure the stroked line.
[aPath fill];
[aPath stroke];
// Restore the graphics state before drawing any other content.
//CGContextRestoreGState(aRef);
}
