iOS Quartz2D基本圖形繪製

Quartz2D

1.基本圖形繪製有三大類

• 線
• 長方形
• 圓與扇形
• 以上三種進行代碼分類，如圖：

2.針對三類解釋(解釋在代碼中)

• 線

#pragma mark - line
//線的基本畫法步驟
-(void) setBaseLine{
//1.獲取視圖上下文
CGContextRef contextRef=UIGraphicsGetCurrentContext();
//2.拼接路徑
//2.1設置繪製點
CGPoint startP=CGPointMake(10, 10);
CGPoint endP=CGPointMake(100, 100);
//2.2建立路徑
CGMutablePathRef path=CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, startP.x, startP.y);
CGPathAddLineToPoint(path, NULL, endP.x, endP.y);
//3.將路徑添加到上下文
CGContextAddPath(contextRef, path);
//4.將上下文渲染到視圖上
CGContextStrokePath(contextRef);
}
//線的基本畫法步驟2UIBezierPath(封裝了setBaseLine的一些步驟)
-(void) setLine{
//拼接路徑
//設置繪製點
CGPoint startP=CGPointMake(10, 10);
CGPoint endP=CGPointMake(100, 100);
//建立路徑
UIBezierPath *path=[UIBezierPath bezierPath];
[path moveToPoint:startP];
[path addLineToPoint:endP];

//繪製路徑
[path stroke];

}
//畫連在一塊兒的折線
-(void) setTwoLine{
//1.獲取視圖上下文
CGContextRef contextRef=UIGraphicsGetCurrentContext();
//2.拼接路徑
//2.1設置繪製點
CGPoint startP=CGPointMake(10, 10);
CGPoint endP=CGPointMake(100, 100);
CGPoint endP2=CGPointMake(200, 120);
//2.2建立路徑
UIBezierPath *path=[UIBezierPath bezierPath];
[path moveToPoint:startP];
[path addLineToPoint:endP];
[path addLineToPoint:endP2];
//3.將路徑添加到上下文
CGContextAddPath(contextRef, path.CGPath);
//4.將上下文渲染到視圖上
CGContextStrokePath(contextRef);
}
//畫兩條不連在一塊兒的線，並設置線的顏色等等
-(void) setTwoLine2{
//1.獲取視圖上下文
CGContextRef contextRef=UIGraphicsGetCurrentContext();
//2.拼接路徑
//2.1設置繪製點
CGPoint startP=CGPointMake(10, 10);
CGPoint endP=CGPointMake(100, 100);
CGPoint startP2=CGPointMake(110, 110);
CGPoint endP2=CGPointMake(200, 120);
//2.2建立路徑
UIBezierPath *path=[UIBezierPath bezierPath];
[path moveToPoint:startP];
[path addLineToPoint:endP];



UIBezierPath *path2=[UIBezierPath bezierPath];
[path2 moveToPoint:startP2];
[path2 addLineToPoint:endP2];
//3.將路徑添加到上下文
CGContextAddPath(contextRef, path.CGPath);
CGContextAddPath(contextRef, path2.CGPath);

//在渲染以前作一些基本設置
CGContextSetLineWidth(contextRef, 8);
CGContextSetLineCap(contextRef, kCGLineCapRound);
[[UIColor redColor] set];

//4.將上下文渲染到視圖上
CGContextStrokePath(contextRef);
}
//設置兩條線的顏色等不一樣的寫法
-(void) setTwoLine3{
//2.拼接路徑
//2.1設置繪製點
CGPoint startP=CGPointMake(10, 10);
CGPoint endP=CGPointMake(100, 100);
CGPoint startP2=CGPointMake(110, 110);
CGPoint endP2=CGPointMake(200, 120);
//2.2建立路徑
UIBezierPath *path=[UIBezierPath bezierPath];
[path moveToPoint:startP];
[path addLineToPoint:endP];
[[UIColor redColor]set];
[path stroke];

UIBezierPath *path2=[UIBezierPath bezierPath];
[path2 moveToPoint:startP2];
[path2 addLineToPoint:endP2];
[[UIColor blackColor]set];
[path2 stroke];
}
        ```
* 長方形

```objc

#pragma mark - rect
-(void) setRect{
    UIBezierPath *path=[UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 100, 100)];
    [path stroke];
}

-(void) setRoundRect{
    UIBezierPath *path=[UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 100, 100) cornerRadius:50];
    [path stroke];
}

• 圓與扇形

#pragma mark - Arc
//畫一完整的圓，fill與stroke的區別
-(void) setArc{
    // 圓弧
    // Center：圓心
    // startAngle:弧度
    // clockwise:YES:順時針 NO：逆時針
    UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_PI_2 *4  clockwise:YES];
    //[path stroke];
    [path fill];
}
//完整的扇形，fill會自動封閉路徑，stroke不會，須要手動設置
-(void) setArc2{
    UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_2_PI clockwise:NO];
    [path addLineToPoint:CGPointMake(100, 100)];
    //[path fill];

    [path closePath];
    [path stroke];
}

3.詳細源代碼

• github