Quartz2D的基本用法

Quartz 2D是一個二維繪圖引擎，同時支持iOS和Mac系統。Quartz2D的基本用法。

1、自定義view的步驟

• 新建一個類，繼承自UIView

• 實現- (void)drawRect:(CGRect)rect方法，然后在這個方法中

• 取得跟當前view相關聯的圖形上下文

• 繪制相應的圖形內容

• 利用圖形上下文將繪制的所有內容渲染顯示到view上面

2、Quartz2D繪圖的代碼步驟

• 獲得圖形上下文
  CGContextRef ctx = UIGraphicsGetCurrentContext();

• 拼接路徑（下面代碼是搞一條線段）
  CGContextMoveToPoint(ctx, 10, 10);
  CGContextAddLineToPoint(ctx, 100, 100);

• 繪制路徑
  CGContextStrokePath(ctx); // CGContextFillPath(ctx);

3、常用拼接路徑函數

• 新建一個起點
  void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y);

• 添加新的線段到某個點
  void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y);

• 添加一個矩形
  void CGContextAddRect(CGContextRef c, CGRect rect);

• 添加一個橢圓
  void CGContextAddEllipseInRect(CGContextRef context, CGRect rect);

• 添加一個圓弧
  void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle,                                         CGFloat endAngle, int clockwise);

4、常用繪制路徑函數

• Mode參數決定繪制的模式
  void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)

• 繪制空心路徑
  void CGContextStrokePath(CGContextRef c)

• 繪制實心路徑
  void CGContextFillPath(CGContextRef c)
  

  提示：一般以CGContextDraw、CGContextStroke、CGContextFill開頭的函數，都是用來繪制路徑的

5、圖形上下文棧的操作

• 將當前的上下文copy一份,保存到棧頂(那個棧叫做”圖形上下文棧”)
  void CGContextSaveGState(CGContextRef c)

• 將棧頂的上下文出棧,替換掉當前的上下文
  void CGContextRestoreGState(CGContextRef c)

6、代碼實例

- (void)drawRect:(CGRect)rect
{
    // Drawing code
    // 1.獲得圖形上下文
    CGContextRef ctxR = UIGraphicsGetCurrentContext();


// 2.拼接圖形(路徑)
// 設置線段寬度
CGContextSetLineWidth(ctxR, 10);

// 設置線段頭尾部的樣式
/**
    kCGLineCapButt,
    kCGLineCapRound,    //圓角
    kCGLineCapSquare
*/
CGContextSetLineCap(ctxR, kCGLineCapRound);

// 設置線段轉折點的樣式
/**
    kCGLineJoinMiter,
    kCGLineJoinRound,    //圓角
    kCGLineJoinBevel
*/
CGContextSetLineJoin(ctxR, kCGLineJoinRound);

/**  第1根線段  **/
// 設置顏色
CGContextSetRGBStrokeColor(ctxR, 1, 0, 0, 1);
// 設置一個起點
CGContextMoveToPoint(ctxR, 10, 10);
// 添加一條線段到(100, 100)
CGContextAddLineToPoint(ctxR, 100, 100);

// 渲染一次
CGContextStrokePath(ctxR);


/**  第2根線段  **/
// 設置顏色
CGContextSetRGBStrokeColor(ctxR, 0, 0, 1, 1);
// 設置一個起點
CGContextMoveToPoint(ctxR, 200, 190);
// 添加一條線段到(150, 40)
CGContextAddLineToPoint(ctxR, 150, 40);
CGContextAddLineToPoint(ctxR, 120, 60);


// 3.渲染顯示到view上面
CGContextStrokePath(ctxR);

}</pre> 


- (void)drawRect:(CGRect)rect
{
    drawForRect();
}

/**

畫四邊形
*/
void drawForRect()
{
// 1.獲得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.畫矩形
CGContextAddRect(ctxR, CGRectMake(10, 10, 150, 100));
// set : 同時設置為實心和空心顏色
// setStroke : 設置空心顏色
// setFill : 設置實心顏色
[[UIColor whiteColor] set];


//    CGContextSetRGBFillColor(ctxR, 0, 0, 1, 1);

// 3.繪制圖形
CGContextFillPath(ctxR);

}
/**

畫三角形
*/
void drawTriangle()
{
// 1.獲得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.畫三角形
CGContextMoveToPoint(ctxR, 0, 0);
CGContextAddLineToPoint(ctxR, 100, 100);
CGContextAddLineToPoint(ctxR, 150, 80);
// 關閉路徑(連接起點和最后一個點)
CGContextClosePath(ctxR);
//
CGContextSetRGBStrokeColor(ctxR, 0, 1, 0, 1);
// 3.繪制圖形
CGContextStrokePath(ctxR);
}</pre> 

 
- (void)drawRect:(CGRect)rect
{
// 1.獲得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();

// 2.畫1/4圓
CGContextMoveToPoint(ctxR, 100, 100);
CGContextAddLineToPoint(ctxR, 100, 150);
CGContextAddArc(ctxR, 100, 100, 50, -M_PI_2, M_PI, 1);
CGContextClosePath(ctxR);
[[UIColor redColor] set];
// 3.顯示所繪制的東西
CGContextFillPath(ctxR);
}


/**

畫圓弧
*/
void drawArc()
{
// 1.獲得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.畫圓弧
// x\y : 圓心
// radius : 半徑
// startAngle : 開始角度
// endAngle : 結束角度
// clockwise : 圓弧的伸展方向(0:順時針, 1:逆時針)
CGContextAddArc(ctxR, 100, 100, 50, M_PI_2, M_PI, 0);



// 3.顯示所繪制的東西
CGContextFillPath(ctxR);

}
/**

畫圓
*/
void drawCircle()
{
// 1.獲得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.畫圓
CGContextAddEllipseInRect(ctxR, CGRectMake(50, 10, 100, 100));
CGContextSetLineWidth(ctxR, 10);
// 3.顯示所繪制的東西
CGContextStrokePath(ctxR);
}</pre> 

 
- (void)drawRect:(CGRect)rect
{
drawImage();
}



void drawImage()
{
    // 1.取得圖片
    UIImage *image = [UIImage imageNamed:@"me"];

// 2.畫

//    [image drawAtPoint:CGPointMake(50, 50)];
//    [image drawInRect:CGRectMake(0, 0, 150, 150)];
    [image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];

// 3.畫文字
NSString *str = @"為xxx所畫";
[str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];

}
/**

畫文字
*/
void drawText()
{
// 1.獲得上下文
CGContextRef ctxR = UIGraphicsGetCurrentContext();
// 2.畫矩形
CGRect cubeRect = CGRectMake(50, 50, 100, 100);
CGContextAddRect(ctxR, cubeRect);
// 3.顯示所繪制的東西
CGContextFillPath(ctxR);


// 4.畫文字
NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";
//    [str drawAtPoint:CGPointZero withAttributes:nil];

NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
// NSForegroundColorAttributeName : 文字顏色
// NSFontAttributeName : 字體
attrs[NSForegroundColorAttributeName] = [UIColor redColor];
attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];
[str drawInRect:cubeRect withAttributes:attrs];

}</pre>