Quartz2D

• 1.Quartz2D是一個(gè)二維的繪圖引擎,同時(shí)支持iOS和Mac OS
• 2.圖形上下文(Graphics Context):是CGContextRef類型的數(shù)據(jù).

作用:

• 2.1保存繪圖信息,繪圖狀態(tài).

• 2.2決定繪制的輸出目標(biāo)(繪制到什么地方去)(輸出目標(biāo)可以是PDF文件)

• 3.過程:

繪制好圖形----(保存)--->通過圖形上下文---(顯示)--->輸出目標(biāo)

• 4.在同一個(gè)繪圖序列里,制定不同的圖形上下文,可以將所繪的圖像繪制到不同的目標(biāo)上

• 在Quartz2D里,提供了幾種Graphics Context

 - ①Bitmap Graphics Context
 - ②PDF Graphics Context
 - ③Window Graphics Context
 - ④Layer Graphics Context
 - ⑤Printer Graphics Context

• 5.自定義UI控件

• 5.1如何利用Quartz2D自定義UI控件?
• 5.2如何利用Quartz2D繪制東西到UIView上?

- ①首先,要有圖形上下文,因?yàn)樗鼙４鎴D形繪制信息,并且決定繪制到什么地方
-  ②其次,圖形上下文必須跟view相關(guān)聯(lián),才能將內(nèi)容繪制到UIView上面.

• 6.自定義UI控件的步驟

• 6.1創(chuàng)建一個(gè)類繼承于UIView

• 6.2實(shí)現(xiàn)

   - (void)drawRect:(CGRect)rect {
// Drawing code
}

然后在這個(gè)方法中,可以:

• 6.2.1獲取跟當(dāng)前View相關(guān)聯(lián)的圖形上下文
• 6.2.2繪制相應(yīng)的圖形內(nèi)容,繪制時(shí)產(chǎn)生的線條,稱為路徑----是由一個(gè)或者多個(gè)直線或者曲線段組成
• 6.2.3利用圖形上下文繪制的所有內(nèi)容,渲染顯示到View上
• 6.2.4利用UIKit封裝的繪圖函數(shù),直接繪圖

BezierPath基礎(chǔ)

• 1.UIBezierPath對(duì)象,是對(duì)CGPathRef數(shù)據(jù)類型的封裝,path如果是基于矢量圖(面向?qū)ο髨D像或者繪圖圖像,一系列由線連接起來的點(diǎn))的,都用直線或者曲線創(chuàng)建

• 2.我們使用直線段去創(chuàng)建矩形和多邊形,使用曲線段創(chuàng)建弧,圓或者其他復(fù)雜的曲線狀態(tài)
• 3.每一段都包括一個(gè),或者多個(gè)點(diǎn).
  4.每一個(gè)直線段或者曲線段的結(jié)束的地方是下一個(gè)開始的地方
• 5.每一個(gè)連接的直線段或者曲線段的集合,稱為subPath
• 6.一個(gè)UIBezierPath對(duì)象定義一個(gè)完整的路勁,包括一個(gè)或者多個(gè)subPath.
• 7.創(chuàng)建path對(duì)象和使用path對(duì)象的過程是分開的,創(chuàng)建path是第一步,包含以下步驟:
• 7.1創(chuàng)建path對(duì)象
• 7.2使用moveToPoint:去設(shè)置初始線段的的起點(diǎn)

下邊給出了簡(jiǎn)單的例子

#pragma mark------ 利用UIBezierPath繪制圖像

- (void)BezierPath_1{
    UIColor *color = [UIColor redColor];
    [color set];
    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 5.0;//線寬
//    path.lineCapStyle = kCGLineCapRound;//線條的拐角
    path.lineJoinStyle = kCGLineJoinRound;//對(duì)接點(diǎn)的處理
    
    /*
     線和多邊形是一些簡(jiǎn)單形狀,我們可以使用moveToPoint:或者addLineToPoint:方法去構(gòu)建.
     moveToPoint:設(shè)置我們想要形狀的起點(diǎn),從這個(gè)點(diǎn)開始,我們可以使用方法addLineToPoint:去創(chuàng)建一個(gè)形狀的線段,也可以連續(xù)的創(chuàng)建line.每一個(gè)line的起點(diǎn)都是先前線段的終點(diǎn),終點(diǎn)就是指定的點(diǎn)
     
     */
        
    //設(shè)置初始線段起點(diǎn)
    [path moveToPoint:CGPointMake(100.0, 0.0)];
    //使用line或者Curve去定義一個(gè)或者多個(gè)subPath
    [path addLineToPoint:CGPointMake(200.0, 40.0)];
    [path addLineToPoint:CGPointMake(160.0, 140.0)];
    [path addLineToPoint:CGPointMake(40.0, 140.0)];
    [path addLineToPoint:CGPointMake(0.0, 40.0)];
    //結(jié)束路徑
    //closePath方法,不僅結(jié)束了subPath ,它也在最后一個(gè)點(diǎn)和第一個(gè)點(diǎn)之間建立了一條線段,如果畫的是多邊形,這一點(diǎn)省去了我們畫最后一條線
    [path closePath];
    //根據(jù)坐標(biāo)連線
    [path stroke];
    
    
}

#pragma mark-----畫線1-------
- (void)drawLine_1{
//1.獲取圖形上下文(圖層)
    //目前所用的上下文,都是UIGraphics開頭的
    // CG-Context-Ref:[CG:目前使用的類型和函數(shù),一般都是以CG開頭][Ref:引用] [框架:CoreGraphics]
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    //描述路徑(可變路徑)
    //創(chuàng)建路徑
    CGMutablePathRef  path = CGPathCreateMutable();
    //設(shè)置起點(diǎn)
    CGPathMoveToPoint(path, NULL, 60, 50);
    //設(shè)置終點(diǎn)
    CGPathAddLineToPoint(path, NULL, 200, 200);
    //把路徑添加到上下文
    CGContextAddPath(cxt, path);
    //線寬
    CGContextSetLineWidth(cxt, 5.0);
    //顏色
//    [[UIColor purpleColor] set];
    CGContextSetRGBStrokeColor(cxt, 0.7, 0.8, 0.5, 0.9);
    
    //設(shè)置線的樣式
    CGContextSetLineCap(cxt, kCGLineCapRound);
    //填充
    [[UIColor greenColor]setFill];
    
    //描邊
    [[UIColor blueColor]setStroke];
    
    //渲染上下文(填充加描邊)
    CGContextDrawPath(cxt, kCGPathEOFillStroke);
//    CGContextFillPath(cxt);
}

#pragma mark-----曲線/矩形-------
- (void)drawCurve{
//獲取上下文
    CGContextRef cxt = UIGraphicsGetCurrentContext();
    //創(chuàng)建路徑
    UIBezierPath *path = [UIBezierPath bezierPath];
    //設(shè)置起點(diǎn)
    [path moveToPoint:CGPointMake(100, 100)];
    //設(shè)置終點(diǎn)
    [path addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(10, 50) controlPoint2:CGPointMake(100, 10)];

//圓形的繪制
//      path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 50, 50) cornerRadius:25];

/*  //描述圓弧路徑
    /*
     bezierPathWithArcCenter:<#(CGPoint)#> radius:<#(CGFloat)#> startAngle:<#(CGFloat)#> endAngle:<#(CGFloat)#> clockwise:<#(BOOL)#>
     參數(shù)1:圓弧的中心點(diǎn)
     參數(shù)2:半徑
     參數(shù)3:起始角度
     參數(shù)4:結(jié)束角度
     參數(shù)5:是否順時(shí)針
     */
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:self.frame.size.width/2 startAngle:0 endAngle:M_PI clockwise:NO];
*/

    
//添加到上下文上
    CGContextAddPath(cxt, path.CGPath);
    //渲染上下文
//    CGContextDrawPath(cxt, kCGPathFillStroke);
    CGContextStrokePath(cxt);
}