- Quarz2D可以實現(xiàn)以下內(nèi)容:
繪制圖形:線條/三角形/矩形/圓/弧形/扇形等
繪制文字
繪制/生成圖片
讀取/生成PDF
截圖/裁剪圖片
自定義UI控件
- Quarz2D繪制四大步驟:
1.獲取當前view的圖形上下文
2.描述路徑
3.將路徑添加到上下文
4.渲染上下文
- Quarz2D只能在DrawRect方法中實現(xiàn)(需自定義View)
第一種繪制方法:
- (void)drawRect:(CGRect)rect {
// Drawing code
//獲取圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//創(chuàng)建路徑
CGMutablePathRef path = CGPathCreateMutable();
//設置起點
CGPathMoveToPoint(path, NULL, 100, 100);
//設置終點
CGPathAddLineToPoint(path, NULL, 200, 200);
//將路徑添加至圖形上下文
CGContextAddPath(ctx, path);
//渲染上下文
CGContextStrokePath(ctx);
}
效果圖:
第二種繪制方法:
- (void)drawRect:(CGRect)rect {
// Drawing code
//獲取圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
//設置起點
CGContextMoveToPoint(ctx, 100, 100);
//設置終點
CGContextAddLineToPoint(ctx, 200, 100);
//渲染到圖形上下文
CGContextStrokePath(ctx);
}
效果圖:
第三種繪制方法:
- (void)drawRect:(CGRect)rect {
// Drawing code
//創(chuàng)建路徑
UIBezierPath *path = [[UIBezierPath alloc] init];
//設置起點
[path moveToPoint:CGPointMake(50, 100)];
//設置終點
[path addLineToPoint:CGPointMake(100, 100)];
//渲染上下文
[path stroke];
}
效果圖:
繪制多條路徑:
- (void)drawRect:(CGRect)rect {
// Drawing code
CGContextRef ctx = UIGraphicsGetCurrentContext();
//設置起點
CGContextMoveToPoint(ctx, 100, 100);
//設置終點
CGContextAddLineToPoint(ctx, 200, 100);
//設置終點
CGContextAddLineToPoint(ctx, 150, 150);
//渲染到圖形上下文
CGContextStrokePath(ctx);
}
效果圖:
使用UIBezierPath繪制多條路徑:
- (void)drawRect:(CGRect)rect {
// Drawing code
//創(chuàng)建路徑
UIBezierPath *path = [[UIBezierPath alloc] init];
//設置起點
[path moveToPoint:CGPointMake(50, 100)];
//設置終點
[path addLineToPoint:CGPointMake(100, 100)];
//渲染上下文
[path stroke];
//創(chuàng)建路徑
UIBezierPath *path1 = [[UIBezierPath alloc] init];
//設置起點
[path1 moveToPoint:CGPointMake(100, 50)];
//設置終點
[path1 addLineToPoint:CGPointMake(150, 150)];
//渲染上下文
[path1 stroke];
}
效果圖:
設置路徑樣式:
- (void)drawRect:(CGRect)rect {
// Drawing code
CGContextRef ctx = UIGraphicsGetCurrentContext();
//設置起點
CGContextMoveToPoint(ctx, 100, 100);
//設置終點
CGContextAddLineToPoint(ctx, 200, 100);
//設置終點
CGContextAddLineToPoint(ctx, 150, 150);
//設置顏色
[[UIColor redColor] set];
//設置線寬
CGContextSetLineWidth(ctx, 10);
//設置線樣式
CGContextSetLineJoin(ctx, kCGLineJoinRound);
//渲染到圖形上下文
CGContextStrokePath(ctx);
}
效果圖:
使用UIBezierPath設置樣式:
- (void)drawRect:(CGRect)rect {
// Drawing code
UIBezierPath *path = [[UIBezierPath alloc] init];
//設置起點
[path moveToPoint:CGPointMake(50, 100)];
//設置終點
[path addLineToPoint:CGPointMake(100, 100)];
//設置紅色
[[UIColor redColor] set];
//渲染上下文
[path stroke];
//創(chuàng)建路徑
UIBezierPath *path1 = [[UIBezierPath alloc] init];
//設置起點
[path1 moveToPoint:CGPointMake(100, 50)];
//設置終點
[path1 addLineToPoint:CGPointMake(150, 150)];
//設置橙色
[[UIColor orangeColor] set];
//渲染上下文
[path1 stroke];
}
效果圖:
繪制曲線:
- (void)drawRect:(CGRect)rect {
//創(chuàng)建路徑
CGContextRef ctx = UIGraphicsGetCurrentContext();
//設置起點
CGContextMoveToPoint(ctx, 20, 20);
//繪制曲線 控制點x 控制點y 終點x 終點y
CGContextAddQuadCurveToPoint(ctx, 50, 50, 20, 100);
//渲染上下文
CGContextStrokePath(ctx);
}
效果圖:
繪制圖形:
- (void)drawRect:(CGRect)rect {
//繪制矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 100, 100)cornerRadius:20];
//描邊
[path stroke];
//填充
[path fill];
}
效果圖:
描邊
填充
繪制圓形:
- (void)drawRect:(CGRect)rect {
/*
Center:圓心
startAngle:弧度
clockwise:YES:順時針 NO:逆時針
*/
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
//描邊
[path stroke];
//填充會自動補齊路徑
[path fill];
}
效果圖:
繪制圓弧:
- (void)drawRect:(CGRect)rect {
/*
Center:圓心
startAngle:弧度
clockwise:YES:順時針 NO:逆時針
*/
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
//描邊
[path stroke];
//填充會自動補齊路徑
[path fill];
}
效果圖:
閉合弧形路徑:
- (void)drawRect:(CGRect)rect {
/*
Center:圓心
startAngle:弧度
clockwise:YES:順時針 NO:逆時針
*/
CGPoint center = CGPointMake(50, 50);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];
//描邊
[path addLineToPoint:center];
//關(guān)閉路徑(關(guān)閉路徑方式1)
[path close];
//填充會自動補齊路徑(關(guān)閉路徑方式2)
[path fill];
}
效果圖:
