溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
一、前言
Quartz2D的API是純C語言的，它是一個(gè)二維繪圖引擎，同時(shí)支持iOS和Mac系統(tǒng)。Quartz2D的API來自于Core Graphics框架，數(shù)據(jù)類型和函數(shù)基本都以CG作為前綴。通常，我們可以使用系統(tǒng)提供的控件去完成大部分UI，但是有些UI界面極其復(fù)雜、而且比較個(gè)性化，用普通的UI控件無法實(shí)現(xiàn)，這時(shí)可以利用Quartz2D技術(shù)將控件內(nèi)部的結(jié)構(gòu)畫出來，類似自定義控件。其實(shí)，iOS中大部分控件的內(nèi)容都是通過Quartz2D畫出來的，因此，Quartz2D在iOS開發(fā)中很重要的一個(gè)價(jià)值是：自定義view（自定義UI控件）。
Quartz 2D能完成的工作：
二、圖形上下文（Graphics Context）
圖形上下文（Graphics Context）：是一個(gè)CGContextRef類型的數(shù)據(jù)。
圖形上下文的作用：
（1）保存繪圖信息、繪圖狀態(tài)
（2）決定繪制的輸出目標(biāo)（繪制到什么地方去？）
（輸出目標(biāo)可以是PDF文件、Bitmap或者顯示器的窗口上）
相同的一套繪圖序列，指定不同的Graphics Context，就可將相同的圖像繪制到不同的目標(biāo)上。
Quartz2D提供了以下幾種類型的Graphics Context：
（1）Bitmap Graphics Context
（2）PDF Graphics Context
（3）Window Graphics Context
（4）Layer Graphics Context
（5）Printer Graphics Context
將當(dāng)前的上下文copy一份,保存到棧頂(那個(gè)棧叫做”圖形上下文棧”)：
void CGContextSaveGState(CGContextRef c)
將棧頂?shù)纳舷挛某鰲?替換掉當(dāng)前的上下文（清空之前對(duì)于上下文設(shè)置）：
void CGContextRestoreGState(CGContextRef c)
三、使用Quartz2D自定義View
1、Quartz2D自定義view
如何利用Quartz2D自定義view？（自定義UI控件）如何利用Quartz2D繪制東西到view上？
首先，得有圖形上下文，因?yàn)樗鼙４胬L圖信息，并且決定著繪制到什么地方去。
其次，那個(gè)圖形上下文必須跟view相關(guān)聯(lián)，才能將內(nèi)容繪制到view上面。
自定義view的步驟：
（1）新建一個(gè)類，繼承自UIView
（2）實(shí)現(xiàn)- (void)drawRect:(CGRect)rect方法，然后在這個(gè)方法中
（a）取得跟當(dāng)前view相關(guān)聯(lián)的圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
（b）繪制相應(yīng)的圖形內(nèi)容
例如：畫1/4圓（扇形）
CGContextMoveToPoint(ctx, 100, 100); CGContextAddLineToPoint(ctx, 100, 150); CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1); CGContextClosePath(ctx); [[UIColor redColor] set];
（3）利用圖形上下文將繪制的所有內(nèi)容渲染顯示到view上面
CGContextFillPath(ctx);
注：
//M_PI的含義:π //M_PI * 2的含義:2π //M_PI_2的含義:π/2 //M_PI / 2的含義:π/2 // 畫的圖形路徑 //bezierPathWithArcCenter:弧所在的圓心 //radius:圓的半徑 //startAngle:開始角度,圓的最右側(cè)為0度 //endAngle:截至角度,向下為正,向上為負(fù). //clockwise:時(shí)針的方向,yes:順時(shí)針 no:逆時(shí)針 UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.center radius:radius startAngle:startA endAngle:endA clockwise:NO];
完整代碼：
//
// MyView.m
// Quartz2DTest
//
// Created by 李峰峰 on 2017/2/6.
// Copyright © 2017年 李峰峰. All rights reserved.
//
#import "MyView.h"
@implementation MyView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor whiteColor];//設(shè)置背景為白色，為了便于觀察繪制后的效果
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, 100, 100);
CGContextAddLineToPoint(ctx, 100, 150);
CGContextAddArc(ctx, 100, 100, 50, -M_PI_2, M_PI, 1);
CGContextClosePath(ctx);
[[UIColor redColor] set];
CGContextFillPath(ctx);
}
@end
運(yùn)行效果：
2、核心方法drawRect:
為什么要實(shí)現(xiàn)drawRect:方法才能繪圖到view上？
因?yàn)樵赿rawRect:方法中才能取得跟view相關(guān)聯(lián)的圖形上下文
drawRect:方法在什么時(shí)候被調(diào)用？
當(dāng)view第一次顯示到屏幕上時(shí)（被加到UIWindow上顯示出來）
調(diào)用view的setNeedsDisplay或者setNeedsDisplayInRect:時(shí).
注意4點(diǎn):
3、Quartz2D繪圖的代碼步驟
第一步：獲得圖形上下文：
CGContextRef ctx = UIGraphicsGetCurrentContext();
第二步：拼接路徑（下面代碼是繪制一條線段）：
CGContextMoveToPoint(ctx, 10, 10); CGContextAddLineToPoint(ctx, 100, 100);
第三步：繪制路徑：
CGContextStrokePath(ctx); // CGContextFillPath(ctx);
四、Quartz2D重要函數(shù)
1、常用拼接路徑函數(shù)
新建一個(gè)起點(diǎn)
void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
添加新的線段到某個(gè)點(diǎn)
void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)
添加一個(gè)矩形
void CGContextAddRect(CGContextRef c, CGRect rect)
添加一個(gè)橢圓
void CGContextAddEllipseInRect(CGContextRef context, CGRect rect)
添加一個(gè)圓弧
void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
2、常用繪制路徑函數(shù)
一般以CGContextDraw、CGContextStroke、CGContextFill開頭的函數(shù)，都是用來繪制路徑的。
Mode參數(shù)決定繪制的模式
void CGContextDrawPath(CGContextRef c, CGPathDrawingMode mode)
繪制空心路徑
void CGContextStrokePath(CGContextRef c)
繪制實(shí)心路徑
void CGContextFillPath(CGContextRef c)
3、矩陣操作函數(shù)
利用矩陣操作，能讓繪制到上下文中的所有路徑一起發(fā)生變化。
縮放：
void CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy)
旋轉(zhuǎn)：
void CGContextRotateCTM(CGContextRef c, CGFloat angle)
平移：
void CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty)
4、其他常用函數(shù)
設(shè)置線段寬度
CGContextSetLineWidth(ctx, 10);
設(shè)置線段頭尾部的樣式
CGContextSetLineCap(ctx, kCGLineCapRound);
設(shè)置線段轉(zhuǎn)折點(diǎn)的樣式
CGContextSetLineJoin(ctx, kCGLineJoinRound);
設(shè)置顏色
CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
五、Quartz2D的內(nèi)存管理
關(guān)于Quartz2D內(nèi)存管理，有以下原則：
（1）使用含有“Create”或“Copy”的函數(shù)創(chuàng)建的對(duì)象，使用完后必須釋放，否則將導(dǎo)致內(nèi)存泄露。
（2）使用不含有“Create”或“Copy”的函數(shù)獲取的對(duì)象，則不需要釋放
（3）如果retain了一個(gè)對(duì)象，不再使用時(shí)，需要將其release掉。
（4）可以使用Quartz 2D的函數(shù)來指定retain和release一個(gè)對(duì)象。例如，如果創(chuàng)建了一個(gè)CGColorSpace對(duì)象，則使用函數(shù)CGColorSpaceRetain和CGColorSpaceRelease來retain和release對(duì)象。
（5）也可以使用Core Foundation的CFRetain和CFRelease。注意不能傳遞NULL值給這些函數(shù)。
六、Quartz2D使用案例
1、畫矩形、正方形
- (void)drawRect:(CGRect)rect {
//1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 200)];
//3.把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
[[UIColor redColor] set];// 路徑的顏色
//4.把上下文的內(nèi)容渲染到View的layer.
//CGContextStrokePath(ctx);// 描邊路徑
CGContextFillPath(ctx);// 填充路徑
}
運(yùn)行效果：
2、畫扇形
除上面“二、使用Quartz2D自定義View”中的方法外，也可以使用OC中自帶畫圖方法實(shí)現(xiàn)，如下：
- (void)drawRect:(CGRect)rect {
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
CGFloat radius = rect.size.width * 0.5 - 10;
CGFloat startA = 0;
CGFloat endA = -M_PI_2;
// 畫弧的路徑
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:NO];
// 添加一根線到圓心
[path addLineToPoint:center];
// 閉合路徑
[path closePath];
// 路徑顏色
[[UIColor redColor] set];
// 填充路徑
[path fill];
// 描邊路徑
//[path stroke];
}
運(yùn)行效果：
注：
判斷一個(gè)點(diǎn)是否在一個(gè)矩形框內(nèi)
CGRectContainsPoint（rect,point）;//判斷point這個(gè)點(diǎn)是否在rect這個(gè)矩形框內(nèi)
3、畫圓形
- (void)drawRect:(CGRect)rect {
//1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
// cornerRadius:圓角半徑。矩形的寬高都為200，如果圓角為100，那么兩個(gè)角之間弧線上任意一點(diǎn)到矩形中心的距離都為100,所以為圓形
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 200, 200) cornerRadius:100];
//3.把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
[[UIColor redColor] set];// 路徑的顏色
//4.把上下文的內(nèi)容渲染到View的layer.
// CGContextStrokePath(ctx);// 描邊路徑
CGContextFillPath(ctx);// 填充路徑
}
運(yùn)行效果：
4、畫圓角矩形
- (void)drawRect:(CGRect)rect {
//1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
// cornerRadius:圓角半徑。
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 200, 200) cornerRadius:50];
//3.把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
[[UIColor redColor] set];// 路徑的顏色
//4.把上下文的內(nèi)容渲染到View的layer.
CGContextStrokePath(ctx);// 描邊路徑
//CGContextFillPath(ctx);// 填充路徑
}
運(yùn)行效果：
5、畫直線
- (void)drawRect:(CGRect)rect {
//1.獲取跟View相關(guān)聯(lián)的上下文(uigraphics開頭)
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
//一條路徑可以繪制多條線 路徑:path 路徑繪制多條線:path使用了兩次（2次的起點(diǎn)到終點(diǎn)），都是將線添加到某個(gè)點(diǎn)
UIBezierPath *path = [UIBezierPath bezierPath];
//設(shè)置起點(diǎn)
[path moveToPoint:CGPointMake(50, 150)];
//添加一根線Line到某個(gè)點(diǎn)
[path addLineToPoint:CGPointMake(250, 50)];
//畫第二根線
[path moveToPoint:CGPointMake(50, 250)];
[path addLineToPoint:CGPointMake(250, 100)];
//設(shè)置線寬
CGContextSetLineWidth(ctx, 20);
//設(shè)置線的連接樣式
CGContextSetLineJoin(ctx, kCGLineJoinBevel);
//設(shè)置線的頂角樣式
CGContextSetLineCap(ctx, kCGLineCapRound);// 圓角線條
//設(shè)置線條顏色
[[UIColor redColor] set];
//3.把路徑添加到上下文
CGContextAddPath(ctx, path.CGPath);
//4.把上下文當(dāng)中繪制的內(nèi)容渲染到跟View關(guān)聯(lián)的layer
CGContextStrokePath(ctx);
}
運(yùn)行效果：
6、畫曲線
本塞爾曲線原理：
- (void)drawRect:(CGRect)rect {
//1.獲取跟View相關(guān)聯(lián)的上下文.】
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
UIBezierPath *path = [UIBezierPath bezierPath];
//畫曲線,設(shè)置起點(diǎn).還有一個(gè)控制點(diǎn)(用來控制曲線的方向跟彎曲程度)
//設(shè)置起點(diǎn)
[path moveToPoint:CGPointMake(10, 150)];
//添加一要曲線到某個(gè)點(diǎn)
[path addQuadCurveToPoint:CGPointMake(200, 150) controlPoint:CGPointMake(150, 10)];
//3.把路徑添加到上下文當(dāng)中
CGContextAddPath(ctx, path.CGPath);
//4.把上下文的內(nèi)容渲染View上
CGContextStrokePath(ctx);
}
運(yùn)行效果：
7、畫餅圖
方法1：
- (void)drawRect:(CGRect)rect {
NSArray *dataArray = @[@25,@25,@50];
// 畫弧
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
// 半徑
CGFloat radius = rect.size.width * 0.5 - 10;
CGFloat startA = 0;
CGFloat angle = 0;
CGFloat endA = 0;
for (NSNumber *num in dataArray) {
startA = endA;
// 遍歷出第一個(gè)對(duì)象25,angle =25/100 *2π，即angle = π/2，所以為1/4圓,
angle = num.intValue / 100.0 * M_PI * 2;
// 截至角度= 開始的角度+ 遍歷出的對(duì)象所占整個(gè)圓形的角度
endA = startA + angle;
// 順勢針畫貝塞爾曲線
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
// 設(shè)置隨機(jī)顏色
[[self randomColor] set];
// 添加一根線到圓心
[path addLineToPoint:center];
// 填充路徑
[path fill];
// 描邊路徑
// [path stroke];
}
}
/**
生成隨機(jī)顏色
@return UIColor
*/
-(UIColor *)randomColor{
CGFloat redLevel = rand() / (float) RAND_MAX;
CGFloat greenLevel = rand() / (float) RAND_MAX;
CGFloat blueLevel = rand() / (float) RAND_MAX;
return [UIColor colorWithRed: redLevel green: greenLevel blue: blueLevel alpha: 1.0];
}
運(yùn)行效果：
方法二：
- (void)drawRect:(CGRect)rect {
CGPoint center = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * .5);
CGFloat radius = self.bounds.size.width * 0.5 - 10;
CGFloat startA = 0;
CGFloat endA = 25 / 100.0 * M_PI * 2;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
[[UIColor redColor] set];
//添加一根線到圓心
[path addLineToPoint:center];
[path fill];
//第二個(gè)扇形
startA = endA;
CGFloat angle = 25 / 100.0 * M_PI * 2;
endA = startA + angle;
UIBezierPath *path3 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
[[UIColor greenColor] set];
//添加一根線到圓心
[path3 addLineToPoint:center];
[path3 fill];
startA = endA;
angle = 50 / 100.0 * M_PI * 2;
endA = startA + angle;
UIBezierPath *path4 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
[[UIColor blueColor] set];
//添加一根線到圓心
[path4 addLineToPoint:center];
[path4 fill];
}
/**
生成隨機(jī)顏色
@return UIColor
*/
-(UIColor *)randomColor{
CGFloat redLevel = rand() / (float) RAND_MAX;
CGFloat greenLevel = rand() / (float) RAND_MAX;
CGFloat blueLevel = rand() / (float) RAND_MAX;
return [UIColor colorWithRed: redLevel green: greenLevel blue: blueLevel alpha: 1.0];
}
注：
如果想實(shí)現(xiàn)點(diǎn)擊以下變換顏色可以加上如下代碼：
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
//重繪
[self setNeedsDisplay];
}
8、繪制文字
- (void)drawRect:(CGRect)rect {
NSString *str = @"李峰峰博客：http://www.imlifengfeng.com/";
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
//設(shè)置字體
dict[NSFontAttributeName] = [UIFont systemFontOfSize:30];
//設(shè)置顏色
dict[NSForegroundColorAttributeName] = [UIColor redColor];
//設(shè)置描邊
dict[NSStrokeColorAttributeName] = [UIColor blueColor];
dict[NSStrokeWidthAttributeName] = @3;
//設(shè)置陰影
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor greenColor];
shadow.shadowOffset = CGSizeMake(-2, -2);
shadow.shadowBlurRadius = 3;
dict[NSShadowAttributeName] = shadow;
//設(shè)置文字的屬性
//drawAtPoint不會(huì)自動(dòng)換行
//[str drawAtPoint:CGPointMake(0, 0) withAttributes:dict];
//drawInRect會(huì)自動(dòng)換行
[str drawInRect:self.bounds withAttributes:dict];
}
運(yùn)行效果：
9、加水印
//
// ViewController.m
// Quartz2DTest
//
// Created by 李峰峰 on 2017/2/6.
// Copyright © 2017年 李峰峰. All rights reserved.
//
#import "ViewController.h"
#import "MyView.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIImageView *myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
[self.view addSubview:myImageView];
//生成一張圖片
//0.加載圖片
UIImage *oriImage = [UIImage imageNamed:@"test"];
//1.創(chuàng)建位圖上下文(size:開啟多大的上下文,就會(huì)生成多大的圖片)
UIGraphicsBeginImageContext(oriImage.size);
//2.把圖片繪制到上下文當(dāng)中
[oriImage drawAtPoint:CGPointZero];
//3.繪制水印(雖說UILabel可以快速實(shí)現(xiàn)這種效果，但是我們也可以繪制出來)
NSString *str = @"李峰峰博客";
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSFontAttributeName] = [UIFont systemFontOfSize:20];
dict[NSForegroundColorAttributeName] = [UIColor redColor];
[str drawAtPoint:CGPointZero withAttributes:dict];
//4.從上下文當(dāng)中生成一張圖片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//5.關(guān)閉位圖上下文
UIGraphicsEndImageContext();
myImageView.image = newImage;
}
@end
運(yùn)行效果：
10、屏幕截圖
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
//生成圖片
//1.開啟一個(gè)位圖上下文
UIGraphicsBeginImageContext(self.view.bounds.size);
//2.把View的內(nèi)容繪制到上下文當(dāng)中
CGContextRef ctx = UIGraphicsGetCurrentContext();
//UIView內(nèi)容想要繪制到上下文當(dāng)中, 必須使用渲染的方式
[self.view.layer renderInContext:ctx];
//3.從上下文當(dāng)中生成一張圖片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//4.關(guān)閉上下文
UIGraphicsEndImageContext();
//把圖片轉(zhuǎn)成二進(jìn)制流
//NSData *data = UIImageJPEGRepresentation(newImage, 1);
NSData *data = UIImagePNGRepresentation(newImage);
[data writeToFile:@"/Users/lifengfeng/Downloads/imlifengfeng.jpg" atomically:YES];
}
運(yùn)行效果：
截圖而已，就跟普通截圖一樣，自己試。
總結(jié)
以上就是關(guān)于Quartz2D一些常用的案例，Quartz2D還可以實(shí)現(xiàn)更多效果，具體的根據(jù)需求去實(shí)現(xiàn)。希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)億速云的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼