Quartz2D
- 在 - (void)drawRect:(CGRect)rect方法里面實(shí)現(xiàn)添加一個(gè)根線
- 基本步驟
- 1.獲取上下文->2.描述路徑->3.把路徑添加到上下文->4.把上下文的內(nèi)容渲染到View的layer.
//作用:繪圖（該方法是UIView的方法溺拱，所以凡是UIView的子類都擁有术奖，都可以實(shí)現(xiàn)）
//什么時(shí)候調(diào)用:(系統(tǒng)自動(dòng)調(diào)用)當(dāng)View顯示的時(shí)候調(diào)用
//參數(shù):當(dāng)前View的bounds
//在drawRect系統(tǒng)已經(jīng)自動(dòng)創(chuàng)建了一個(gè)跟當(dāng)前View相關(guān)聯(lián)的上下文
- (void)drawRect:(CGRect)rect {
//1.獲取跟View相關(guān)聯(lián)的上下文(uigraphics開(kāi)頭)
// CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
// UIBezierPath *path = [UIBezierPath bezierPath];
//設(shè)置起點(diǎn)
// [path moveToPoint:CGPointMake(50, 250)];
//添加一根曲線到某個(gè)點(diǎn)
// [path addQuadCurveToPoint:CGPointMake(250, 250) controlPoint:CGPointMake(80, 100)];
//3.把路徑添加到上下文
// CGContextAddPath(ctx, path.CGPath);
//4.把上下文內(nèi)容渲染到View上.
// CGContextStrokePath(ctx);
//在drawRect系統(tǒng)已經(jīng)自動(dòng)創(chuàng)建了一個(gè)跟當(dāng)前View相關(guān)聯(lián)的上下文，所以只要添加上路徑就可以了
UIBezierPath *path = [UIBezierPath bezierPath];
//設(shè)置起點(diǎn)
[path moveToPoint:CGPointMake(50, 150)];
//添加一根線到某個(gè)點(diǎn)
[path addLineToPoint:CGPointMake(250, 50)];
[path setLineWidth:10];
[path setLineCapStyle:kCGLineCapRound];
[[UIColor redColor] set];
[path stroke];
// 自定義的方法中是實(shí)現(xiàn)添加一根線
// [self drawLine];
}
- 自定義方法中實(shí)現(xiàn)view的添加一根線的方法
//畫直線（也可以畫曲線）
- (void)drawLine {
//1.獲取跟View相關(guān)聯(lián)的上下文(uigraphics開(kāi)頭)
CGContextRef context = UIGraphicsGetCurrentContext();
//2.描述路徑
//一條路徑可以繪制多條線
UIBezierPath *path = [UIBezierPath bezierPath];
//設(shè)置起點(diǎn)
[path moveToPoint:CGPointMake(50, 150)];
//添加一根線到某個(gè)點(diǎn)
[path addLineToPoint:CGPointMake(250, 50)];
//畫第二根線
//[path moveToPoint:CGPointMake(50, 250)];
//[path addLineToPoint:CGPointMake(250, 100)];
//把上一條路徑的終點(diǎn),當(dāng)作是下一個(gè)路徑的起點(diǎn)
[path addLineToPoint:CGPointMake(50, 250)];
//設(shè)置上下文的狀態(tài)
// 設(shè)置線寬
CGContextSetLineWidth(context, 10);
//設(shè)置線的連接樣式
CGContextSetLineJoin(context, kCGLineJoinMiter);
//設(shè)置線的頂角樣式
CGContextSetLineCap(context, kCGLineCapRound);
//設(shè)置顏色（Sets the fill and stroke colors in the current drawing context.）
[[UIColor redColor] set];
//3.把路徑添加到上下文
//UIBezierPath->UIKit --> CGPathRef->CoreGraphics
CGContextAddPath(context, path.CGPath);
//4.把上下文當(dāng)中繪制的內(nèi)容渲染到跟View關(guān)聯(lián)的layer.(stroke ,fill)
CGContextStrokePath(context);
}
- (void)drawRect:(CGRect)rect {
//描述一個(gè)橢圓
//UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 200, 200)];
//繪制路徑
//[[UIColor yellowColor] set];
//[path fill];
//畫弧
//Center:弧所在的圓心
//radius:圓的半徑
//startAngle:開(kāi)始角度,圓的最右側(cè)為0度
//endAngle:截至角度,向下為正,向上為負(fù).
//clockwise:時(shí)針的方向,yes:順時(shí)針 no:逆時(shí)針
//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:self.center radius:radius startAngle:startA endAngle:endA clockwise:NO];
//畫扇形
//添加一根線到圓心
[path addLineToPoint:self.center];
//關(guān)閉路徑(自動(dòng)的從路徑的終點(diǎn)連接到路徑的起點(diǎn))
//[path closePath];
[[UIColor redColor] set];
//使用fill在填充之前,自動(dòng)的關(guān)閉路徑
[path fill];
//1.獲取上下文->2.描述路徑->3.把路徑添加到上下文->4.把上下文的內(nèi)容渲染到View的layer.
}
//畫矩形
- (void)drawRect {
//1.獲取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.描述路徑
//矩形
//UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 200)];
//畫圓角矩形
//cornerRadius:圓角半徑
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);
}
b貝曲爾曲線畫餅圖
- 步驟
- 設(shè)置圓心的位置center（CGPoint）
- 設(shè)置開(kāi)始的角度startAngle（CGFloat）月培，這其中涉及到數(shù)字轉(zhuǎn)換為角度（num.intValue / 100.0 * M_PI * 2;）
- 使用貝曲爾曲線畫圓
- (void)drawRect:(CGRect)rect {
// Drawing code
NSArray *dataArray = @[@25,@25,@50];
//畫弧
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * .5);
CGFloat radius = rect.size.width * 0.5 - 10;
// 初始化角度
CGFloat startA = 0;
CGFloat angle = 0;
CGFloat endA = 0;
// 從數(shù)組中讀取到每個(gè)圓所占的比例
for (NSNumber *num in dataArray) {
startA = endA;
//轉(zhuǎn)換為角度
angle = num.intValue / 100.0 * M_PI * 2;
endA = startA + angle;
// 使用貝曲爾曲線畫圓
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
// 曲線的顏色
[[self randomColor] set];
//添加一根線到圓心
[path addLineToPoint:center];
// 自動(dòng)閉合
[path fill];
}
}
雪花效果
- (void)awakeFromNib {
//添加定時(shí)器
//[NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(update) userInfo:nil repeats:YES];
//什么時(shí)候調(diào)用指定的方法?
//當(dāng)下一次屏幕刷新時(shí)調(diào)用(屏幕每一秒刷新60)
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
//想要讓CADisplayLink工作, 必須得要添加到主運(yùn)行循環(huán)當(dāng)中.
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
//setNeedsDisplay底層會(huì)調(diào)用drawRect,并不是立馬調(diào)用的.只是設(shè)了一個(gè)調(diào)用的標(biāo)志.
//等下一次屏幕刷新時(shí)才去調(diào)用drawRect
}
static int _snowY = 0;
- (void)update {
_snowY += 10;
if (_snowY > self.bounds.size.height) {
_snowY = 0;
}
//重繪
[self setNeedsDisplay];
}
// 三個(gè)方法的調(diào)用順序：
// 首先會(huì)調(diào)用awakeFromNib恼策，在里面設(shè)置屏幕的刷新率瞭稼，然后在顯示view的時(shí)候調(diào)用了drawRect:(CGRect)rect方法，添加了一張雪花的圖片绘面，然后屏幕在刷新的時(shí)候調(diào)用了update 的方法欺税，每一次調(diào)用的時(shí)候都會(huì)進(jìn)行重繪，重繪時(shí)又調(diào)用drawRect:(CGRect)rect 方法更新圖片的y 位置
- (void)drawRect:(CGRect)rect {
//加載圖片
UIImage *image = [UIImage imageNamed:@"雪花"];
[image drawAtPoint:CGPointMake(0, _snowY)];
}
圖片加水印
- 不僅圖片可以繪畫到圖形上下文中揭璃，NSString字符串也可以
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor yellowColor];
//生成一張圖片
//0.加載圖片
UIImage *oriImage = [UIImage imageNamed:@"小黃人"];
//1.創(chuàng)建位圖上下文(size:開(kāi)啟多大的上下文,就會(huì)生成多大的圖片)
UIGraphicsBeginImageContext(oriImage.size);
//2.把圖片繪制到上下文當(dāng)中
[oriImage drawAtPoint:CGPointZero]; // CGPointZero 在沒(méi)有完全確定位置的時(shí)候用CGPointZero代替
//3.繪制水印
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();
self.imageV.image = newImage;
}
利用貝曲爾曲線和圖形上下文裁剪圖片
- (void)viewDidLoad {
[super viewDidLoad];
//生成一張圓形圖片
//0.加載圖片
UIImage *oriImage = [UIImage imageNamed:@"阿貍頭像"];
//1.開(kāi)啟一個(gè)和圖片一樣大小的位圖上下文
UIGraphicsBeginImageContext(oriImage.size);
//2.設(shè)置一個(gè)裁剪區(qū)域(圓形)晚凿，從左上角開(kāi)始，
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, oriImage.size.width, oriImage.size.height)];
//把路徑設(shè)置成裁剪區(qū)域(超過(guò)裁剪區(qū)域以外的內(nèi)容會(huì)自動(dòng)被裁剪掉)
[path addClip];
//3.把圖片繪制到上下文當(dāng)中
[oriImage drawAtPoint:CGPointZero];
//4.從上下文當(dāng)中生成一張圖片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//5.關(guān)閉上下文
UIGraphicsEndImageContext();
self.imageV.image = newImage;
}
圖片截屏
- (IBAction)pan:(UIPanGestureRecognizer *)pan {
//獲取當(dāng)前手指所在的點(diǎn)
CGPoint curP = [pan locationInView:self.imageV];
//判斷手勢(shì)的狀態(tài)
if(pan.state == UIGestureRecognizerStateBegan) {
//記錄當(dāng)前手指的開(kāi)始點(diǎn)
self.startP = curP;
} else if(pan.state == UIGestureRecognizerStateChanged) {
//rect
CGFloat w = curP.x - self.startP.x;
CGFloat h = curP.y - self.startP.y;
CGRect rect = CGRectMake(self.startP.x, self.startP.y, w, h);
self.coverView.frame = rect;
}else if(pan.state == UIGestureRecognizerStateEnded) {
//生成一張圖片
UIGraphicsBeginImageContext(self.imageV.bounds.size);
//設(shè)置裁剪區(qū)域
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.coverView.frame];
[path addClip];
//2.把UIImageV當(dāng)中的內(nèi)容渲染到上下文當(dāng)中
CGContextRef ctx = UIGraphicsGetCurrentContext();
[self.imageV.layer renderInContext:ctx];
//從上下文當(dāng)中獲取圖片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//關(guān)閉上下文
UIGraphicsEndImageContext();
self.imageV.image = newImage;
[self.coverView removeFromSuperview];
}
}
