iOS UIBezierPath類 介紹

感謝：http://blog.csdn.net/crayondeng/article/details/11093689

使用UIBezierPath類可以創建基于矢量的路徑，這個類在UIKit中。此類是Core Graphics框架關于path的一個封裝。使用此類可以定義簡單的形狀，如橢圓或者矩形，或者有多個直線和曲線段組成的形狀。

1.Bezier Path 基礎

UIBezierPath對象是CGPathRef數據類型的封裝。path如果是基于矢量形狀的，都用直線和曲線段去創建。我們使用直線段去創建矩形和多邊形，使用曲線段去創建弧（arc），圓或者其他復雜的曲線形狀。每一段都包括一個或者多個點，繪圖命令定義如何去詮釋這些點。每一個直線段或者曲線段的結束的地方是下一個的開始的地方。每一個連接的直線或者曲線段的集合成為subpath。一個UIBezierPath對象定義一個完整的路徑包括一個或者多個subpaths。

創建和使用一個path對象的過程是分開的。創建path是第一步，包含一下步驟：

（1）創建一個Bezier?path對象。

（2）使用方法moveToPoint:去設置初始線段的起點。

（3）添加line或者curve去定義一個或者多個subpaths。

（4）改變UIBezierPath對象跟繪圖相關的屬性。

例如，我們可以設置stroked path的屬性lineWidth和lineJoinStyle。也可以設置filled path的屬性usesEvenOddFillRule。

當創建path，我們應該管理path上面的點相對于原點（0，0），這樣我們在隨后就可以很容易的移動path了。為了繪制path對象，我們要用到stroke和fill方法。這些方法在current graphic context下渲染path的line和curve段。

2、使用UIBezierPath創建多邊形---在path下面添加直線條形成多邊形

多邊形是一些簡單的形狀,這些形狀是由一些直線線條組成，我們可以用moveToPoint: 和 addLineToPoint:方法去構建。

方法moveToPoint:設置我們想要創建形狀的起點。從這點開始，我們可以用方法addLineToPoint:去創建一個形狀的線段。

我們可以連續的創建line，每一個line的起點都是先前的終點，終點就是指定的點。

下面的代碼描述了如何用線段去創建一個五邊形。第五條線通過調用closePath方法得到的，它連接了最后一個點（0，40）和第一個點（100，0）

說明：closePath方法不僅結束一個shape的subpath表述，它也在最后一個點和第一個點之間畫一條線段，如果我們畫多邊形的話，這個一個便利的方法我們不需要去畫最后一條線。

[cpp]view plaincopy

//?Only?override?drawRect:?if?you?perform?custom?drawing.

//?An?empty?implementation?adversely?affects?performance?during?animation.

-?(void)drawRect:(CGRect)rect

{

UIColor?*color?=?[UIColor?redColor];

[color?set];//設置線條顏色

UIBezierPath*?aPath?=?[UIBezierPath?bezierPath];

aPath.lineWidth?=?5.0;

aPath.lineCapStyle?=?kCGLineCapRound;//線條拐角

aPath.lineJoinStyle?=?kCGLineCapRound;//終點處理

//?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];//第五條線通過調用closePath方法得到的

[aPath?stroke];//Draws?line?根據坐標點連線

}

注：這個類要繼承自UIView。

運行的結果如下圖：

如果修改最后一句代碼：[aPathfill];

運行結果就如下：

這樣就知道stroke ?和 ?fill ?方法的區別了吧！

3、使用UIBezierPath創建矩形

使用這個方法即可：

[cpp]view plaincopy

Creates?and?returns?anewUIBezierPath?object?initialized?with?a?rectangular?path.

+?(UIBezierPath?*)bezierPathWithRect:(CGRect)rect

demo代碼：

[cpp]view plaincopy

-?(void)drawRect:(CGRect)rect

{

UIColor?*color?=?[UIColor?redColor];

[color?set];//設置線條顏色

UIBezierPath*?aPath?=?[UIBezierPath?bezierPathWithRect:CGRectMake(20,?20,?100,?50)];

aPath.lineWidth?=?5.0;

aPath.lineCapStyle?=?kCGLineCapRound;//線條拐角

aPath.lineJoinStyle?=?kCGLineCapRound;//終點處理

[aPath?stroke];

}

4、使用UIBezierPath創建圓形或者橢圓形

使用這個方法即可：

[cpp]view plaincopy

Creates?and?returns?anewUIBezierPath?object?initialized?with?an?oval?path?inscribed?in?the?specified?rectangle

+?(UIBezierPath?*)bezierPathWithOvalInRect:(CGRect)rect

這個方法根據傳入的rect矩形參數繪制一個內切曲線。

當傳入的rect是一個正方形時，繪制的圖像是一個內切圓；當傳入的rect是一個長方形時，繪制的圖像是一個內切橢圓。

5、使用UIBezierPath創建一段弧線

使用這個方法：

[cpp]view plaincopy

Creates?and?returns?anewUIBezierPath?object?initialized?with?an?arc?of?a?circle.

+?(UIBezierPath?*)bezierPathWithArcCenter:(CGPoint)center?radius:(CGFloat)radius?startAngle:(CGFloat)startAngle?endAngle:(CGFloat)endAngle?clockwise:(BOOL)clockwise

Parameters

center

Specifies?the?center?point?of?the?circle?(in?the?current?coordinate?system)?used?to?define?the?arc.

radius

Specifies?the?radius?of?the?circle?used?to?define?the?arc.

startAngle

Specifies?the?starting?angle?of?the?arc?(measured?in?radians).

endAngle

Specifies?the?end?angle?of?the?arc?(measured?in?radians).

clockwise

The?direction?in?which?to?draw?the?arc.

Return?Value

Anewpath?object?with?the?specified?arc.

其中的參數分別指定：這段圓弧的中心，半徑，開始角度，結束角度，是否順時針方向。

下圖為弧線的參考系。

demo代碼：

[cpp]view plaincopy

#define?pi?3.14159265359

#define???DEGREES_TO_RADIANS(degrees)??((pi?*?degrees)/?180)

[cpp]view plaincopy

-?(void)drawRect:(CGRect)rect

{

UIColor?*color?=?[UIColor?redColor];

[color?set];//設置線條顏色

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;//終點處理

[aPath?stroke];

}

結果如下圖：

6、UIBezierPath類提供了添加二次貝塞爾曲線和三次貝塞爾曲線的支持。

曲線段在當前點開始，在指定的點結束。曲線的形狀有開始點，結束點，一個或者多個控制點的切線定義。下圖顯示了兩種曲線類型的相似，以及控制點和curve形狀的關系。

(1)繪制二次貝塞爾曲線

使用到這個方法：

[cpp]view plaincopy

Appends?a?quadratic?Bézier?curve?to?the?receiver’s?path.

-?(void)addQuadCurveToPoint:(CGPoint)endPoint?controlPoint:(CGPoint)controlPoint

Parameters

endPoint

The?end?point?of?the?curve.

controlPoint

The?control?point?of?the?curve.

demo代碼：

[cpp]view plaincopy

-?(void)drawRect:(CGRect)rect

{

UIColor?*color?=?[UIColor?redColor];

[color?set];//設置線條顏色

UIBezierPath*?aPath?=?[UIBezierPath?bezierPath];

aPath.lineWidth?=?5.0;

aPath.lineCapStyle?=?kCGLineCapRound;//線條拐角

aPath.lineJoinStyle?=?kCGLineCapRound;//終點處理

[aPath?moveToPoint:CGPointMake(20,?100)];

[aPath?addQuadCurveToPoint:CGPointMake(120,?100)?controlPoint:CGPointMake(70,?0)];

[aPath?stroke];

}

(2)繪制三次貝塞爾曲線

使用到這個方法：

[cpp]view plaincopy

Appends?a?cubic?Bézier?curve?to?the?receiver’s?path.

-?(void)addCurveToPoint:(CGPoint)endPoint?controlPoint1:(CGPoint)controlPoint1?controlPoint2:(CGPoint)controlPoint2

Parameters

endPoint

The?end?point?of?the?curve.

controlPoint1

The?first?control?point?to?use?when?computing?the?curve.

controlPoint2

The?second?control?point?to?use?when?computing?the?curve.

demo代碼：

[cpp]view plaincopy

-?(void)drawRect:(CGRect)rect

{

UIColor?*color?=?[UIColor?redColor];

[color?set];//設置線條顏色

UIBezierPath*?aPath?=?[UIBezierPath?bezierPath];

aPath.lineWidth?=?5.0;

aPath.lineCapStyle?=?kCGLineCapRound;//線條拐角

aPath.lineJoinStyle?=?kCGLineCapRound;//終點處理

[aPath?moveToPoint:CGPointMake(20,?50)];

[aPath?addCurveToPoint:CGPointMake(200,?50)?controlPoint1:CGPointMake(110,?0)?controlPoint2:CGPointMake(110,?100)];

[aPath?stroke];

}

7.使用Core Graphics函數去修改path。

UIBezierPath類只是CGPathRef數據類型和path繪圖屬性的一個封裝。雖然通常我們可以用UIBezierPath類的方法去添加直線段和曲線段，UIBezierPath類還提供了一個屬性CGPath，我們可以用來直接修改底層的path data type。如果我們希望用Core Graphics 框架函數去創建path，則我們要用到此屬性。

有兩種方法可以用來修改和UIBezierPath對象相關的path。可以完全的使用Core Graphics函數去修改path，也可以使用Core Graphics函數和UIBezierPath函數混合去修改。第一種方法在某些方面相對來說比較容易。我們可以創建一個CGPathRef數據類型，并調用我們需要修改path信息的函數。

下面的代碼就是賦值一個新的CGPathRef給UIBezierPath對象。

// 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函數和UIBezierPath函數混合方法，我們必須小心的移動path 信息在兩者之間。因為UIBezierPath類擁有自己底層的CGPathRef data type，我們不能簡單的檢索該類型并直接的修改它。相反，我們應該生成一個副本，然后修改此副本，然后賦值此副本給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對象的內容。

當創建一個UIBezierPath對象之后，我們可以使用它的stroke和fill方法在current graphics context中去渲染它。在調用這些方法之前，我們要進行一些其他的任務去確保正確的繪制path。

使用UIColor類的方法去stroke和fill想要的顏色。

設置形狀在目標視圖中的位置。如果我們創建的path相對于原點（0，0），則我們可以給current drawing context應用一個適當的affie transform。例如，我想drawing一個形狀起始點在（0，0），我可以調用函數CGContextTranslateCTM,并指定水平和垂直方向的translation值為10。調整graphic context相對于調整path對象的points是首選的方法，因為我們可以很容易的保存和撤銷先前的graphics state。

更新path對象的drawing 屬性。當渲染path時，UIBezierPath實例的drawing屬性會覆蓋graphics context下的屬性值。

下面的代碼實現了在一個自定義view中實現drawRect：方法中去繪制一個橢圓。橢圓邊框矩形的左上角位于視圖坐標系統的點（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);

}

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 使用UIBezierPath類可以創建基于矢量的路徑，這個類在UIKit中。此類是Core Graphics框架關...
    Ms_ChenLong閱讀 861評論 0贊 2
  • 使用UIBezierPath類可以創建基于矢量的路徑，這個類在UIKit中。此類是Core Graphics框架關...
    wintersal閱讀 1,257評論 0贊 51
  • 使用UIBezierPath類可以創建基于矢量的路徑，這個類在UIKit中。此類是Core Graphics框架關...
    我家有頭大懶豬閱讀 2,178評論 0贊 1
  • 使用UIBezierPath類可以創建基于矢量的路徑，這個類在UIKit中。此類是Core Graphics框架關...
    MMOTE閱讀 764評論 0贊 5
  • 春 之于晨，醒悟時 分 不再寒冷，溫暖襲來。枯木生豆芽，大地鋪綠草，爭艷由百花。 濃濃春日下，悠然赴闌珊。 大路同...
    jiangwha閱讀 313評論 0贊 0