Quartz2D

1 Quartz2D簡介

    Quartz2D寫的同一份代碼，既能夠運行在iphone上又能夠運行在mac上，能夠跨平臺開發。開發中比較經常使用的是截屏/裁剪/自定義UI控件。

1.drwaRect方法的使用

- (void)drawRect:(CGRect)rect.

1>.方法當視圖第一次顯示的時候就會調用，再viewWillAppear後調用

2>.默認只會調用一次。當使用[self setNeedDisplay]就能夠重繪。但不會當即繪製，只會再一次顯示刷新繪製

2. 使用步驟

    1.自定義view，而且複寫drawRect：

    2.取得跟當前view想關聯的圖形

    3. 繪製好圖形，繪製時的線條叫路徑。路徑由一個或多條直線或曲線組成

    4.圖形上下文的內容顯示到view上

2 基本圖形繪製

 1.線條繪製

- (void)drawRect:(CGRect)rect
{
    // 1.獲取上下文CGContextRef
    // 目前學的上下文都跟UIGraphics有關，之後想直接獲取上下文，直接敲一個UIGraphics
    CGContextRef ctx = UIGraphicsGetCurrentContext(); //current默認是view
    
    // 2.設置繪圖信息(拼接路徑)
    UIBezierPath *path = [UIBezierPath bezierPath];
    // 設置起點
    [path moveToPoint:CGPointMake(10, 10)];
    // 添加一條線到某個點
    [path addLineToPoint:CGPointMake(125, 125)];
    [path addLineToPoint:CGPointMake(240, 10)];  //以上個點爲起點
    
    // 3.把路徑添加到上下文
    // 直接把UIKit的路徑轉換成CoreGraphics
    CGContextAddPath(ctx, path.CGPath);
    
    // 設置繪圖狀態
    CGContextSetLineWidth(ctx, 10);                    //設置線寬
    CGContextSetLineCap(ctx, kCGLineCapRound);         //設置線條端點的形狀
    //CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);     //設置線條的顏色
    [[UIColor redColor] set];
    
    // 4.把上下文渲染到視圖
    // Stroke描邊
    CGContextStrokePath(ctx);
    
}

 2.曲線繪製

- (void)drawRect:(CGRect)rect
{
    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路徑
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    CGPoint startP = CGPointMake(10, 125);    //起點
    CGPoint endP = CGPointMake(240, 125);     //終點
    CGPoint controlP = CGPointMake(125, 0);   //頂點
    [path moveToPoint:startP];
    [path addQuadCurveToPoint:endP controlPoint:controlP];
    
    // 3.把路徑添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    // 4.渲染上下文到視圖
    CGContextStrokePath(ctx);
    
}

 3.封閉圖形

    三角形    
    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路徑
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    CGPoint startP = CGPointMake(10, 10);
    
    [path moveToPoint:startP];
    
    [path addLineToPoint:CGPointMake(125, 125)];
    
    [path addLineToPoint:CGPointMake(240, 10)];
    
    // 從路徑的終點鏈接到起點
    [path closePath];
    //[path addLineToPoint:startP];
    
    // 3.把路徑添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    [[UIColor blueColor] setFill];        //填充顏色
    [[UIColor redColor] setStroke];       //線條顏色，須要設置線寬  
        
    CGContextSetLineWidth(ctx, 15);
    
    // 4.渲染上下文
    //    CGContextStrokePath(ctx);
    //    CGContextFillPath(ctx);
    // 即填充又描邊 kCGPathFillStroke
    CGContextDrawPath(ctx, kCGPathFillStroke);

 4.矩形/圓矩形

  cornerRadius的大小是長寬的一半，那麼就是圓形

    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路徑  cornerRadius
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 200, 200)];
    path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 200, 200) cornerRadius:20];
    
    // 3.把路徑添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    // 4.渲染上下文
    CGContextStrokePath(ctx);

 5.圓形

    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路徑
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 200, 100)];
    
    // 3.把路徑添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    // 4.渲染上下文
    CGContextStrokePath(ctx);

 6.圓弧

    // 1.獲取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 2.拼接路徑
    CGPoint center = CGPointMake(125, 125);   //圓心
    CGFloat radius = 100;                     //半徑
    CGFloat startA = 0;                       //起點。0℃爲右正方（北偏東45°） 
    CGFloat endA = M_PI_2;                    //終點，45℃
    //clockwise爲YES表明是順時針
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    
    [path addLineToPoint:center]; //添加一條線到圓心，就可繪製四分之一圓
    // 3.把路徑添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    
    // 4.渲染上下文
    CGContextStrokePath(ctx);   繪製圓弧
    //CGContextFillPath(ctx);   繪製圓形