绘制简单图形---CGContextRef篇
2017-07-20 本文已影响19人
小白进城
一、CGContextRef
Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框，CGContextRef看成Quartz 2D绘图环境。
CGContextRef功能强大，我们借助它可以绘制直线、曲线、多边形圆形等各种各样的几何图形，也可以绘制文字、图像等。
二、使用
使用方法：
1.先在自定义View中的drawRect方法中获得上下文context；
2.绘制图形（线，图形，图片等）；
3.设置一些修饰属性；
4.渲染到上下文，完成绘图。
drawRect方法什么时候触发？
1.当view第一次显示到屏幕上时；
2.当调用view的setNeedsDisplay或者setNeedsDisplayInRect:方法时。
例子
绘图样式
/*****************************矩形*****************************/
//1.获取图形上下文，即画板
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.绘制图形
CGContextAddRect(ctx, CGRectMake(10, 10, 40, 40));
//3.设置相关属性
[[UIColor redColor] setStroke]; // 颜色 CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextSetLineWidth(ctx, 5); //线条到宽度
//4.渲染到画板上
CGContextStrokePath(ctx); //空心的
/*****************************圆弧/圆*****************************/
//1.获取图形上下文，即画板
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.绘制图形
CGContextAddArc(ctx, 100, 30, 30, 0, M_PI, 0); //最后一个参数表示方向（顺时针或者逆时针）
//3.设置相关属性
[[UIColor redColor] set]; //填充色fill，线条色stroke都是一样的
CGContextSetLineWidth(ctx, 5); //线条到宽度
//4.渲染到画板上
CGContextStrokePath(ctx); //空心的
//CGContextFillPath(ctx); //填充实心的 半圆
/*****************************椭圆*****************************/
//1.获取图形上下文，即画板
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.绘制图形
CGContextAddEllipseInRect(ctx, CGRectMake(150, 10, 80, 40)); //在矩形内绘制椭圆,宽度和高度相等则为圆形
//3.设置相关属性
[[UIColor redColor] set];
//4.渲染到画板上
CGContextStrokePath(ctx); //空心的
//CGContextFillPath(ctx); //填充
/*****************************直线*****************************/
//1.获取图形上下文，即画板
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.绘制图形
CGContextMoveToPoint(ctx, 10, 100); //起点
CGContextAddLineToPoint(ctx, kScreenWidth-10, 100); //其他点
//3.设置相关属性
CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1); //RGB类型的颜色
CGContextSetLineCap(ctx, kCGLineCapSquare); //起点和重点
CGContextSetLineJoin(ctx, kCGLineJoinBevel); //转角
CGContextSetLineWidth(ctx, 5); //线条的宽度
CGContextStrokePath(ctx); //直线只能绘制空心的，不能调用CGContextFillPath(ctx)
/*****************************不规则图形*****************************/
//1.获取图形上下文，即画板
CGContextRef ctx = UIGraphicsGetCurrentContext();
//2.绘制图形
CGContextMoveToPoint(ctx, 20, 150); //设置起点
CGContextAddLineToPoint(ctx, 100, 180); //
CGContextClosePath(ctx); //合并路径
//3.设置相关属性
CGContextSetLineWidth(ctx, 5); //线宽
CGContextSetRGBStrokeColor(ctx, 0, 1, 0, 1); //RGB类型的颜色
CGContextSetLineCap(ctx, kCGLineCapSquare); //终点样式
CGContextSetLineJoin(ctx, kCGLineJoinBevel); //连接点样式
//[[UIColor redColor] setFill];
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor); //设置填充色
//[[UIColor redColor] setStroke];
CGContextSetStrokeColorWithColor(ctx, [UIColor brownColor].CGColor); //路径颜色
/*
kCGPathFill, //填充
kCGPathEOFill,
kCGPathStroke, //线条
kCGPathFillStroke, //线条＋填充
kCGPathEOFillStroke
*/
CGContextDrawPath(ctx, kCGPathFillStroke); //fill and stroke
/*****************************绘制图片*****************************/
UIImage *img = [UIImage imageNamed:@"QQ"];
[img drawAtPoint:CGPointMake( 150, 125)]; //绘制到指定的点，图片size
//[img drawInRect:CGRectMake(120, 140, img.size.width, img.size.height)]; //指定位置大小
//[img drawAsPatternInRect:CGRectMake(0, 0, kScreenWidth, kScreenHeight/2.0)]; //多个平铺
/*****************************绘制文字*****************************/
NSString *str = @"少年不识愁滋味，为赋新词强说愁\n而今识得愁滋味，却道天凉好个秋";
//设置文字属性
NSMutableParagraphStyle *style = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
style.alignment = NSTextAlignmentCenter;
NSDictionary *dic = @{NSForegroundColorAttributeName:[UIColor redColor],
NSFontAttributeName:[UIFont systemFontOfSize:18],
NSParagraphStyleAttributeName:style};
//绘制
CGSize size = [str sizeWithAttributes:dic];
CGRect strRect = CGRectMake((kScreenWidth-size.width)/2.0, 200, size.width, size.height);
[str drawWithRect:strRect options:NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin attributes:dic context:nil];
三、应用
样式
