Quartz2D 簡介( 後續會有相關應用)

第一部分 繪制直線

代碼示例：

- (void)drawRect:(CGRect)rect{
    //獲取圖形上下文
    CGContextRef cxContext = UIGraphicsGetCurrentContext();
    
    //開始畫圖
    //設置直線起點
    CGContextMoveToPoint(cxContext, 0, 20);
    //設置直線中點
    CGContextAddLineToPoint(cxContext, 100, 20);
    //渲染
    CGContextStrokePath(cxContext);
}

效果圖：

我們只用了四行代碼就在view畫出了一條直線，但是會覺得很枯燥，知識一條黑色的直線而已。

這樣我們給他添點屬性。

為了測試我首先只給他添加了顏色

示例代碼：

- (void)drawRect:(CGRect)rect{
    //獲取圖形上下文
    CGContextRef cxContext = UIGraphicsGetCurrentContext();
    
    //開始畫圖
    //設置直線起點
    CGContextMoveToPoint(cxContext, 0, 20);
    //設置直線中點
    CGContextAddLineToPoint(cxContext, 100, 20);
    //設置顏色
    CGContextSetRGBStrokeColor(cxContext, 1, 0, 0, 1);
    //渲染
    CGContextStrokePath(cxContext);
}

效果圖：

可以看到他變為了紅色。

再分析我所添加的代碼，可以猜想還有寬度等等。

下面我在添加一下寬度。

示例代碼：

- (void)drawRect:(CGRect)rect{
    //獲取圖形上下文
    CGContextRef cxContext = UIGraphicsGetCurrentContext();
    
    //開始畫圖
    //設置直線起點
    CGContextMoveToPoint(cxContext, 0, 20);
    //設置直線中點
    CGContextAddLineToPoint(cxContext, 100, 20);
    //設置顏色
    CGContextSetRGBStrokeColor(cxContext, 1, 0, 0, 1);
    //設置寬度
    CGContextSetLineWidth(cxContext, 10);
    //渲染
    CGContextStrokePath(cxContext);
}

效果圖：

到這裏簡單繪制直線我們已經可以掌握了，但是如果多考率一下的話不難想到，如果我們現在花兩條沒有交點的線（我們可以通過CGContextAddLineToPoint繼續添加線）該如何區分呢。

下面介紹一下路徑path，我們可以通過它繪制線並且區分。

示例代碼：

- (void)drawRect:(CGRect)rect{
    //獲取圖形上下文
    CGContextRef cxContext = UIGraphicsGetCurrentContext();
    //創建2條路徑
    CGMutablePathRef path1 = CGPathCreateMutable();
    CGMutablePathRef path2 = CGPathCreateMutable();
    //開始畫圖
    //繪制第一條直線
    CGPathMoveToPoint(path1, NULL, 0, 20);
    CGPathAddLineToPoint(path1, NULL, 100, 20);
    //繪制第二條直線
    CGPathMoveToPoint(path2, NULL, 0, 50);
    CGPathAddLineToPoint(path2, NULL, 100, 50);
    //把路徑添加到上下文中
    CGContextAddPath(cxContext, path1);
    CGContextAddPath(cxContext, path2);
    //渲染
    CGContextStrokePath(cxContext);
    //釋放 因為是CG所以需要手動釋放
    CGPathRelease(path1);
    CGPathRelease(path2);
}

效果圖:

第二部分 繪制圖形

示例代碼：

- (void)drawRect:(CGRect)rect{
    //獲取圖形上下文
    CGContextRef cxContext = UIGraphicsGetCurrentContext();
    //繪制矩形
    CGContextAddRect(cxContext, CGRectMake(20, 20, 100, 100));
    //渲染
    CGContextStrokePath(cxContext);
    
}

效果圖：

示例代碼：

- (void)drawRect:(CGRect)rect{
    
    //獲取圖形上下文
    CGContextRef cxContext = UIGraphicsGetCurrentContext();
    //繪制圓
    CGContextAddArc(cxContext, 100, 100, 25, 0, M_PI, 0);
    //渲染
    CGContextStrokePath(cxContext);
    
}

效果圖：

第三部分 繪制文字

示例代碼：

- (void)drawRect:(CGRect)rect{
    //獲取圖形上下文
    CGContextRef cxContext = UIGraphicsGetCurrentContext();
    //繪制矩形
    CGContextAddRect(cxContext, CGRectMake(20, 20, 100, 100));
    //渲染
    CGContextStrokePath(cxContext);
    //文字內容
    NSString *str = @"旭寶愛吃魚旭寶愛吃魚旭寶愛吃魚旭寶愛吃魚旭寶愛吃魚";
    //將文字繪制到指定區域 自動換行 抽出範圍後不顯示
    [str drawInRect:CGRectMake(20, 20, 100, 100) withAttributes:nil];
    //將文字繪制到指定點
//    [str drawAtPoint:CGPointMake(0, 0) withAttributes:nil];
    
}

效果圖：

第四部分 繪制圖片

實例代碼：

- (void)drawRect:(CGRect)rect{
    
    UIImage * image = [UIImage imageNamed:@"2.jpg"];
    
    //平鋪
    [image drawAsPatternInRect:self.bounds];
    
}

效果圖：

示例代碼：

- (void)drawRect:(CGRect)rect{
    
    UIImage * image = [UIImage imageNamed:@"2.jpg"];
    
    //拉伸
    [image drawInRect:self.bounds];
    
}

效果圖:

實例代碼：

- (void)drawRect:(CGRect)rect{
    
    UIImage * image = [UIImage imageNamed:@"2.jpg"];
    
    //原圖指定位置（圖片的左上點）
    [image drawAtPoint:self.center];
    
}

效果圖：

IOS Quartz2D簡介