掌握Quartz2d的图形绘制API

"【画线drawLine】"

1.获取上下文件UIGraphicsGetCurrentContext();

2.设置起点CGContextMoveToPoint(ctx, 10, 10);

3.添加连接点AddLineToPoint(ctx, 110, 10);

4.渲染CGContextStrokePath(ctx);

5.设置线宽CGContextSetLineWidth(ctx, 3);

6.设置线的颜色CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);

7.再添加1个连接点完成矩形绘制

8.设置线的首尾样式CGContextSetLineCap(ctx, kCGLineCapButt);

9.设置线的连接样式CGContextSetLineJoin(ctx, kCGLineJoinRound);

KCGLineJoinMiter 折点 KCGLineJoinRound 圆点 KCGLineJoinBevel 切点

Main.storyboard

"【画矩形drawRectangle】"

1.获取上下文件UIGraphicsGetCurrentContext();

2.设置起点,并连接四个点成为矩形

*CGContextMoveToPoint(ctx, 10, 10)

*AddLineToPoint(ctx, 110, 10);

*AddLineToPoint(ctx, 110, 110);

*AddLineToPoint(ctx, 110, 10);

*AddLineToPoint(ctx, 10, 10);

3.画空心CGContextStrokePath(ctx)

4.画实心CGContextFillPath(ctx);

5.使用CGContextStrokeRect();/ CGContextFillRect(); 画矩形

"【画三角形triangle】"

1.获取上下文件UIGraphicsGetCurrentContext();

2.设置起点,并连接三个点

3.关闭路径CGContextClosePath(ctx);

4.渲染CGContextStrokePath(ctx)

"【画圆circle】"

CGContextAddEllipseInRect(context, CGRectMake(10, 10, 100, 100));

"【画弧arc】"

//x y 圆点

//radius 半径

//startAngle 开始角度

//endAngle 结束角度

//clockwise 圆弧的伸展方向 0 顺时针 1 逆时针

CGContextAddArc(context, 100, 100, 50, 0, M_PI_2, 1);

//1顺时针 0

"【画扇形sector】"

//设置扇形路径的起点

CGContextMoveToPoint(context, 100, 100);

CGContextAddArc(context, 100, 100, 50, M_PI_4, 3 * M_PI_4, 0);

CGContextClosePath(context);

LineView.h

#import <UIKit/UIKit.h>

@interface LineView : UIView

@end

LineView.m

// LineView.m

// A05.画线

// Created by huan on 16/1/27.

#import "LineView.h"

@implementation LineView

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

-(void)drawRectangle{

// 绘一条

//获取上下文上下文的输出目录是 self[view]

CGContextRef context = UIGraphicsGetCurrentContext();

//设置线颜色

CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1);

// 设置线宽

CGContextSetLineWidth(context, 13);

// 画一条线

//设置线的头尾的样式

CGContextSetLineCap(context, kCGLineCapButt);

//设置连接点的样式

CGContextSetLineJoin(context, kCGLineJoinBevel);

//画一个矩形

//==========第一种方法===================

//设置一起点

// CGContextMoveToPoint(context, 10, 10);

//设置连线另外三点

// CGContextAddLineToPoint(context, 110, 10);

// CGContextAddLineToPoint(context, 110, 110);

// CGContextAddLineToPoint(context, 10, 110);

// CGContextAddLineToPoint(context, 10, 10);

//=============第二种方法============

CGContextAddRect(context, CGRectMake(10, 10, 100, 100));

//画到view[渲染](空心)

// CGContextStrokePath(context);

//填充（实心）

CGContextFillPath(context);

}

- (void)drawRect:(CGRect)rect {

// Drawing code

// [self drawRectangle];

[self drawTriangle];//三角形

// [self drawCircle];

// [self drawArc];//弧

// [self drawSector];//扇形

}

-(void)drawTriangle{

//获取上下文上下文的输出目录是 self[view]

CGContextRef context = UIGraphicsGetCurrentContext();

//设置线颜色

//设置一起点

CGContextMoveToPoint(context, 10, 10);

//设置连线另外两点

CGContextAddLineToPoint(context, 110, 10);

CGContextAddLineToPoint(context, 110, 110);

// CGContextAddLineToPoint(context, 10, 10);

//关闭路径

CGContextClosePath(context);

//画到view[渲染](空心)

CGContextStrokePath(context);

}

-(void)drawCircle{

//上下文

CGContextRef context = UIGraphicsGetCurrentContext();

//画圈

CGContextAddEllipseInRect(context, CGRectMake(10, 10, 100, 100));

//渲染

CGContextStrokePath(context);

}

-(void)drawArc{

//上下文

CGContextRef context = UIGraphicsGetCurrentContext();

// x,y 圆心 radius 半径 startAngle 画弧的起始位置 endAngle画弧的结束位置 clockwidse 0 顺时针 1 逆时针

CGContextAddArc(context, 100, 100, 60, 0, M_PI, 1);

CGContextClosePath(context);

//渲染

CGContextStrokePath(context);

// CGContextFillPath(context);

}

-(void)drawSector{

//上下文

CGContextRef context = UIGraphicsGetCurrentContext();

//设置起点

CGContextMoveToPoint(context, 100, 100);

// x,y 圆心 radius 半径 startAngle 画弧的起始位置 endAngle画弧的结束位置 clockwidse 0 顺时针 1 逆时针

CGContextAddArc(context, 100, 100, 60, -M_PI_4, -3 * M_PI_4, 1);

CGContextClosePath(context);

//渲染

CGContextStrokePath(context);

}

@end

"【画文字和图片】"

调用文字或者图片的drawAtPoint:或drawInRect方法

文字可设置属性

@{NSFontAttributeName:[UIFont systemFontOfSize:15],NSForegroundColorAttributeName:[UIColor redColor]};

图片

可view上画图片调用drawAtPoint:或drawInRect方法

drawAsPatternInRect可以平铺图片

Main.storyboard

TextImageView.m

// TextImageView.m

// B04.画文字和图片

// Created by huan on 16/1/27.

#import "TextImageView.h"

@implementation TextImageView

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

// Drawing code

//画图片

UIImage *image = [UIImage imageNamed:@"papa"];

// [image drawAtPoint:CGPointZero];

// [image drawInRect:CGRectMake(10, 10, 50, 50)];

//平铺

[image drawAsPatternInRect:CGRectMake(0, 0, 180, 180)];

//画文字

NSString *text = @"adbsdfdsfskhjkhjkhjkhjkhkjhjkhkjhjkhjkhjkhjkhjkhjkhjkhhjkhjkhkjhkjhjkjkhad";

CGFloat w = rect.size.width;

CGFloat h = rect.size.height;

//这个方法不会换行

// [text drawAtPoint:CGPointZero withAttributes:nil];

// [text drawAtPoint:CGPointMake(10, 100) withAttributes:nil];

//设置字体的样式

NSDictionary *attr = @{NSFontAttributeName:[UIFont systemFontOfSize:13], NSForegroundColorAttributeName:[UIColor yellowColor]};

//指定宽度和高度可以换行当超过高度时，不会换行，同时，内容也少了。

[text drawInRect:CGRectMake(0, 0, w, h * 0.5) withAttributes:attr];

}

@end

"【画进度圈】"

ViewController.m

// ViewController.m

// B05.进度圈

// Created by huan on 16/1/27.

#import "ViewController.h"

#import "ProgressCircle.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet ProgressCircle *progressCircle;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

}

-(IBAction)sliderChange:(UISlider *)sender{

NSLog(@"%f", sender.value);

self.progressCircle.progress = sender.value;

}

@end

ProgressCircle.h

#import <UIKit/UIKit.h>

@interface ProgressCircle : UIView

//进度 0~1

@property (nonatomic, assign) float progress;//进度

@end

ProgressCircle.m

// ProgressCircle.m

// B05.进度圈

// Created by huan on 16/1/27.

#import "ProgressCircle.h"

@implementation ProgressCircle

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {//当显示在屏幕上会调用

// Drawing code

CGFloat textH = 20;

CGFloat textW = 30;

CGFloat viewW = rect.size.width;

CGFloat viewH = rect.size.height;

CGFloat textX = (viewW - textW) * 0.5;

CGFloat textY = (viewH - textH) * 0.5;

//1.画文字

NSString *text = [NSString stringWithFormat: @"%.2f", self.progress];

[text drawInRect:CGRectMake(textX, textY, textW, textH) withAttributes:nil];

//2.画弧

CGContextRef context = UIGraphicsGetCurrentContext();

CGFloat radius = (viewW - 10) * 0.5;

CGFloat endAngle = self.progress * 2 * M_PI - M_PI_4;

CGContextAddArc(context, viewW * 0.5, viewH * 0.5, radius, -M_PI_4, endAngle, 0);

CGContextStrokePath(context);

}

-(void)setProgress:(float)progress{

_progress = progress;

//重绘

[self setNeedsDisplay];

}

@end

小黄人"空"

Main.storyboard

HuangView.m

// HuangView.m

// B06.小黄人

// Created by huan on 16/1/27.

#import "HuangView.h"

#define topMargin 50 //头距离控制器view顶部的距离

#define middleH 150 //头部中间的高度

#define radius 80 //圆的半径

#define glassesH 30 //眼镜框的高度

@implementation HuangView

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

// Drawing code

//上下文

CGContextRef context = UIGraphicsGetCurrentContext();

//1.画头部

[self drawHead:rect context:context];

CGFloat viewCenterX = rect.size.width * 0.5;

CGFloat topCenterY = topMargin +radius;

//2.眼镜

//2.1 眼框

[[UIColor blackColor] set];

CGFloat padding = 5;//间距

CGContextAddRect(context, CGRectMake(viewCenterX - radius - padding, topCenterY, (radius + padding) * 2, glassesH));

CGContextFillPath(context);

//2.2 大眼睛

//画左边白色圆圈

[[UIColor whiteColor] set];

CGFloat whiteRadius = radius * 0.4;

CGContextAddArc(context, viewCenterX - whiteRadius, topCenterY + glassesH * 0.5, whiteRadius, 0, 2 * M_PI, 0);

CGContextFillPath(context);

//画右边白色圆圈

CGContextAddArc(context, viewCenterX + whiteRadius, topCenterY + glassesH * 0.5, whiteRadius, 0, 2 * M_PI, 0);

CGContextFillPath(context);

//画左边黑色空心圆

[[UIColor blackColor] set];

CGContextSetLineWidth(context, 10);

CGContextAddArc(context, viewCenterX - whiteRadius, topCenterY + glassesH * 0.5, whiteRadius, 0, 2 * M_PI, 0);

CGContextStrokePath(context);

CGContextAddArc(context, viewCenterX + whiteRadius, topCenterY + glassesH * 0.5, whiteRadius, 0, 2 * M_PI, 0);

CGContextStrokePath(context);

//2.3 眼珠

//3.画头发

//4.画晓嘴

}

-(void)drawHead:(CGRect)rect context:(CGContextRef)context{

CGFloat viewCenterX = rect.size.width * 0.5;

CGFloat topCenterY = topMargin +radius;

//1.画头部

//1.1 顶部

//设置颜色

[[UIColor yellowColor] set];

CGContextAddArc(context, viewCenterX, topCenterY, radius, 0, M_PI, 1);

CGContextFillPath(context);

//1.2 中间

CGContextAddRect(context, CGRectMake(viewCenterX - radius, topCenterY, radius * 2, middleH));

CGContextFillPath(context);

//1.3 尾部

CGContextAddArc(context, viewCenterX, topCenterY + middleH, radius, 0, M_PI, 0);

CGContextFillPath(context);

}

@end