iOS學習——Quartz2D學習（1）

標籤：位元影像   int   app   phi   樣本   樣式   時鐘   uiview   關聯   

本文以問答形式主要講述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對象的內容？

 

當建立一個UIBezierPath對象之後，我們可以使用它的 stroke和 fill方法在current graphics context中去渲染它，這兩個方法的底層的實現，就是擷取上下文，拼接路徑,把路徑添加到上下文,渲染到View。在調用這些方法之前，我們要進行一些其他的任務去確保正確的繪製path，以及path的設定。使用UIColor類的方法去stroke和fill想要的顏色。 使用stroke和 fill方法進行渲染時，不需要我們手動去擷取上下文了，這兩個方法會自定擷取view的上下文，然後在該view上繪製渲染path對應的路徑，stroke是繪製線，fill是填充path對應的封閉地區。

//設定矩形路徑 pathUIBezierPath *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];

 

 

  

iOS學習——Quartz2D學習（1）