Quartz2D學習（1）

本文以問答形式主要講述Quartz2D的相關內容，參考內容是網上下載的學習視頻資料。

1、什麼是Quartz2D?

　　他是一個二維的繪圖引擎,同時支持iOS和Mac系統 

2、Quartz2D能完成的工作

　　畫基本線條,繪製文字,圖片,截圖,自定義UIView.

3、Quartz2D在開發中的價值

　　當我們的控制項樣式極其複雜時,可以把控制項內部的結構給畫出畫,就是自定義控制項.

4、什麼是圖形上下文

圖形上下文是用來保存用戶繪製的內容狀態,並決定繪製到哪個地方的.

用戶把繪製好的內容先保存到圖形上下文,

然後根據選擇的圖形上下文的不同,繪製的內容顯示到地方也不相同,即輸出目標也不相同.

5、上下文的類型有哪些? 

圖形上下文的類型有:

Bitmap Graphics Context(點陣圖上下文)

PDF Graphics Context

Window Graphics Context 

Layer Graphics Context(圖層上下文,自定義UIView取得上下文就是圖層上下文.

UIView之所以能夠顯示就是因為他內部有一個圖層)

Printer Graphics Context

6.如何自定義UIView,步驟是什麼? 

首先得要有上下文,有了上下文才能決定把繪製的東西顯示到哪個地方去.CGContextRef ctx = UIGraphicsGetCurrentContext();

其次就是這個上下文必須得和View相關聯.才能將內容繪製到View上面.在DrawRect方法方法里

步驟:

1.要先自定定UIView

2.實現DrawRect方法

3.在DrawRect方法中取得跟View相關聯的上下文.

4.繪製路徑(描述路徑長什麼樣).

5.把描述好的路徑保存到上下文(即:添加路徑到上下文)

6.把上下文的內容渲染到View

7、DrawRect方法作用?什麼時候調用.

DrawRect作用:專用在這個方法當中繪圖的.只有在這個方法當中才能取得跟View相關聯的上下文.

DrawRect是系統自己調用的, 它是當View顯示的時候自動調用.

8、畫線(基本步驟描述) 

//1.獲取跟View相關聯的上下文 
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.繪製路徑
UIBezierPath *path = [UIBezierPath bezierPath];
　　//2.1設置起點
    [path moveToPoint:CGPointMake(10, 125)];
     //2.2添加一根線到某個點
    [path addLineToPoint:CGPointMake(200, 125)];
//3.把路徑添加到上下文
CGContextAddPath(ctx,path.CGPath);
//4.把上下文的內容渲染到View上面.
CGContextStrokePath(ctx);

9、 想要再添加一根線怎麼辦?

第一種方法:重新設置起點,添加一根線到某個點,一個UIBezierPath路徑上面可以有多條線.

第二種方法:直接在原來的基礎上添加線.把上一條的終點當做下一條線的起點.添加一根線到某個點直接在下麵addLineToPoint:

10、怎麼樣設置線的寬度,顏色,樣式?

設置這些樣式,我們稱為是修改圖形上下文的狀態.

設置線寬:CGContextSetLineWidth(ctx, 20);

設置線段的連接樣式: CGContextSetLineJoin(ctx, kCGLineJoinRound);

添加頂角樣式:CGContextSetLineCap(ctx, kCGLineCapRound);

設置線的顏色: [[UIColor redColor] setStroke];

11、如何畫曲線?

畫曲線方法比較特殊需要一個控制點來決定曲線的彎曲程度.畫曲線方法為:

//先設置一個曲線的起點
[path moveToPoint:CGPointMake(10, 125)];
//再添加到個點到曲線的終點.同時還須要一個controlPoint(控制項點決定曲線彎曲的方法程式)
[path addQuadCurveToPoint:CGPointMake(240, 125) controlPoint:CGPointMake(125, 10)];

12、如何畫矩形,圓角矩形?

畫矩形直接利用UIBezierPath給我們封裝好的路徑方法bezierPathWithRect:CGRectMake(x, y, width,height) 

(x,y)點決定了矩形左上角的點在哪個位置
(width,height)是矩形的寬度高度    

圓角矩形的畫法多了一個參數,cornerRadius, bezierPathWithRoundedRect: cornerRadius:

cornerRadius它是矩形的圓角半徑.

通過圓角矩形可以畫一個圓.當矩形是正方形的時候,把圓角半徑設為寬度的一半,就是一個圓.

bezierPathWithRoundedRect:CGRectMake(10, 100, 50, 50) cornerRadius:25

13、如果畫橢圓,圓?

     畫橢圓的方法為:bezierPathWithOvalInRect:CGRectMake(x, y, width,height) 

前兩個參數(x,y)分別代碼圓的圓心

後面兩個參數(width,height)分別代表圓的寬度,與高度.

     寬高都相等時,畫的是一個正圓, 不相等時畫的是一個橢圓

     bezierPathWithOvalInRect:CGRectMake(10, 100, 50, 50)

14、如何利用渲染BezierPath對象的內容？

//設置矩形路徑 path
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 100, 50, 50)];
//設置邊框顏色
[[UIColor greenColor] setStroke];
//設置填充顏色
[[UIColor redColor] setFill];
//設置邊框的線寬
path.lineWidth = 5;
//畫邊框
[path stroke];
//填充內部
[path fill]; 

15、如何畫圓弧?

  首先要確定圓才能確定圓弧，圓孤它就圓上的一個角度嘛。還是使用UIBezierPath的自帶的初始化方法。bezierPathWithArcCenter:(CGPoint) radius:(CGFloat) startAngle:(CGFloat) endAngle:(CGFloat) clockwise:(BOOL)

  center:圓心

        radius:圓的半徑

        startAngle:起始角度

        endAngle:終點角度

        clockwise:Yes順時針,No逆時針

註意:startAngle角度的位置是從圓的最右側為0度，即時鐘的三點鐘方向為起點。

//逆時針畫一個半圓
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(125, 125) radius:100 startAngle:0 endAngle:M_PI clockwise:NO];
[path stroke];
        
//4分之1圓孤
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(125, 125) radius:100 startAngle:0 endAngle:-M_PI_2 clockwise:NO];
 [path stroke];

16、如何畫扇形

扇形就是在圓弧的基礎上進行填充，但是填充需要一個封閉的路徑才能填充，所以畫扇形的方法為:

1.先畫一個圓弧

2.再添加一個一根線到圓心：

3.然後封閉路徑：[path closePath]，該方法會自動從路徑的終點到路徑的起點封閉起來，形成一個封閉的路徑

4.最後進行填充：[path fill]; 

//畫1/4圓示例
//畫圓弧
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(125, 125) radius:100 startAngle:0 endAngle:-M_PI_2 clockwise:NO];
//添加一根線到圓心
[path addLineToPoint:CGPointMake(125, 125)];
//關閉路徑,從路徑的終點到路徑的起點
[path closePath];
//畫扇形邊框
[path stroke];
//用填充的話,它會預設做一個封閉路徑,從路徑的終點到起點. 
[path fill];