iOS中常用的绘图框架是：Quartz 2D，他是Core Graphics框架的一部分。而Core Graphics是基于C语言的一套框架，所以其中很多方法是以CG开头，枚举类型则是以k开头。Quartz 2D可以实现很多功能，如：基于路径的绘图、透明度、阴影、颜色管理、反锯齿、PDF文档生成和PDF元数据访问等。
** 注意： 下面这些方法要写在：-(void)drawRect:(CGRect)rect**这个方法中。因为在这个方法中我们才能获得图形上下文：CGContextRef。图形上下文，类似于一块画布，可以在上面进行绘画操作。绘制完成后，将画布放到我们的view中显示。
一、画线
第一种方法
//画线 第一种方法
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 0.2, 0.2, 0.2, 1);
CGContextSetLineWidth(context, 10);
CGContextSetLineCap(context, kCGLineCapSquare);
CGContextMoveToPoint(context, 20, 64);
CGContextAddLineToPoint(context, 90, 64);
CGContextStrokePath(context);
第二种方法
//画线 第二种方法
CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint apoints[2];
apoints[0] = CGPointMake(100, 64);
apoints[1] = CGPointMake(160, 64);
CGContextAddLines(context, apoints, 2);
CGFloat components[] = {221.0/255,221.0/255,221.0/255,1.0f};
CGContextSetStrokeColor(context, components);
CGContextSetLineWidth(context, 3);
CGContextDrawPath(context, kCGPathStroke);
第三种方法
//创建一条绘图的路径
CGContextRef context = UIGraphicsGetCurrentContext();
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 180, 20);
CGPathAddLineToPoint(path, NULL, 260, 20);
CGContextSetLineWidth(context, 6);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
//把路径添加到上下文中
CGContextAddPath(context, path);
//渲染
CGContextStrokePath(context);
效果图如下：
直线效果图.png
二、画矩形
第一种方法
// 画长方形
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
CGContextSetFillColorWithColor(context, [UIColor purpleColor].CGColor);
CGContextSetLineWidth(context, 5);
CGContextAddRect(context, CGRectMake(20, 20, 150, 80));
CGContextStrokePath(context);
第二种方法
// 第二种方法
CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(180, 20, 60, 100));
CGContextSetLineWidth(context, 10);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetStrokeColorWithColor(context, [UIColor yellowColor].CGColor);
CGContextAddPath(context, path);
CGContextStrokePath(context);
第三种方法
//第三种方法
CGContextSetFillColorWithColor(context, [UIColor orangeColor].CGColor);
CGContextSetLineWidth(context, 2);//线的宽度
CGContextStrokeRect(context, CGRectMake(250, 20, 60, 80));
CGContextFillRect(context, CGRectMake(260, 30, 40, 60));
CGContextDrawPath(context, kCGPathFillStroke);
效果图：
矩形效果图.png
三、画圆形
第一种方法
//第一种方法
CGContextSetFillColorWithColor(context, [UIColor lightGrayColor].CGColor);
CGContextSetLineWidth(context, 6);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
//x,y为圆点坐标，radius半径 startAngle为开始的弧度，endAngle为 结束的弧 clockwise 0为顺时针，1为逆时针。
CGContextAddArc(context, 60, 60, 50, 0, M_PI*2, 0);
CGContextDrawPath(context, kCGPathFillStroke);
第二种方法
//第二种方法
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 2);
CGMutablePathRef path = CGPathCreateMutable();
//x,y为圆点坐标，radius半径 startAngle为开始的弧度，endAngle为 结束的弧 clockwise 0为顺时针，1为逆时针。
CGPathAddArc(path, NULL, 190, 80, 60, 0, M_PI*0.3, 1);
CGContextAddPath(context, path);
CGContextDrawPath(context, kCGPathFillStroke);
效果图.png
四、绘制贝塞尔曲线
// Quartz2D绘制曲线分为两种, 一个是二次贝塞尔曲线, 还有一个是三次贝塞尔曲线, 贝塞尔曲线需要起始点, 终止点 和控制点 , 二次贝塞尔曲线只有一个控制点,三次贝塞尔曲线是有两个控制点
//绘制贝塞尔曲线
CGContextMoveToPoint(context, 40, 100);
CGContextAddQuadCurveToPoint(context, 160, 0, 300, 100);
CGContextSetStrokeColorWithColor(context, [UIColor yellowColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 5);
CGContextDrawPath(context, kCGPathFillStroke);
CGContextMoveToPoint(context, 30, 200);
// 绘制三次贝塞尔曲线
// 第一个参数 : 第一个控制点的坐标位置
// 第二个参数 : 第二个控制点的坐标位置
// 第三个参数 : 终止点的坐标
CGContextAddCurveToPoint(context, 100, 200, 200, 500, 300, 300);
CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor purpleColor].CGColor);
CGContextSetLineWidth(context, 3);
CGContextDrawPath(context, kCGPathFillStroke);
贝塞尔曲线.png
四、绘制图片
//绘制图片
UIImage *image = [UIImage imageNamed:@"qiu.jpg"];
//1.绘制到指定的矩形中，注意如果大小不合适会会进行拉伸
[image drawInRect:CGRectMake(10, 20, 200, 200)];
//2.使用这个使图片上下颠倒了
CGContextDrawImage(context, CGRectMake(230, 60, 70, 70), image.CGImage);
//3.从某一点开始绘制
[image drawAtPoint:CGPointMake(20, 240)];
效果图如下：
绘制图片.png
五、绘制文字
在讲述绘制文字的时候，先总结一下有关富文本的东西。
| 属性名字 | 属性意义 | 属性参数 |
|---|---|---|
| NSFontAttributeName | 字号 | UIFont 默认12 |
| NSForegroundColorAttributeName | 字体颜色 | UIColor，默认黑色 |
| NSBackgroundColorAttributeName | 背景颜色 | UIColor |
| NSStrikethroughStyleAttributeName | 删除线格式 | 1或0 |
| NSStrikethroughColorAttributeName | 删除线颜色 | UIColor |
| NSStrokeWidthAttributeName | 边线宽度 | NSNumber 对象(小数) |
| NSStrokeColorAttributeName | 边线颜色 | UIColor |
| NSUnderlineStyleAttributeName | 下划线 | 例如：NSUnderlineStyleSingle |
| NSUnderlineColorAttributeName | 下划线颜色 | UIColor |
| NSShadowAttributeName | 阴影 | NSShawdow |
| NSExpansionAttributeName | 设置文本扁平化 | NSNumber |
| NSObliquenessAttributeName | 字形倾斜 | NSNumber （float）,正值右倾，负值左倾 |
| NSKernAttributeName | 字符间距 | NSNumber （float）正值加宽，负值变窄 |
| NSLinkAttributeName | 链接 | NSURL (preferred) or NSString |
| NSAttachmentAttributeName | 设置文本附件 | NSTextAttachment对象,常用于文字图片混排 |
| NSParagraphStyleAttributeName | 文本段落格式 | NSParagraphStyle 对象 |
| NSBaselineOffsetAttributeName | 基准线偏移 | NSNumber 对象 |
绘制文字的代码：
//绘制文字
NSMutableParagraphStyle *style=[[NSMutableParagraphStyle alloc]init];//段落样式
NSTextAlignment align=NSTextAlignmentLeft;//对齐方式
style.alignment=align;
style.firstLineHeadIndent = 20.f;//首行缩进
style.lineSpacing = 10;// 字体的行间距
/*
删除线的样式：NSUnderlineStyleNone 不设置删除线
NSUnderlineStyleSingle 设置删除线为细单实线
NSUnderlineStyleThick 设置删除线为粗单实线
NSUnderlineStyleDouble 设置删除线为细双实线
删除线和下划线使用相同的枚举常量作为其属性值
*/
NSDictionary *attributeDict = @{NSFontAttributeName:[UIFont systemFontOfSize:16],NSForegroundColorAttributeName:[UIColor blueColor],NSParagraphStyleAttributeName:style,NSUnderlineStyleAttributeName:@(NSUnderlineStyleSingle),NSUnderlineColorAttributeName:[UIColor greenColor],NSStrikethroughStyleAttributeName:@(NSUnderlineStyleSingle),NSStrikethroughColorAttributeName:[UIColor redColor],NSExpansionAttributeName:@1,NSObliquenessAttributeName:@0};
[@"贝塞尔曲线是由法国数学家“贝塞尔”发现的，他发现：任何一条曲线都能够由和它相切的直线的两个端点来描述，这种曲线表示方式后来被广泛应用到计算机中，称为“贝塞尔曲线”01" drawInRect:CGRectMake(20, 60, 200,400) withAttributes:attributeDict];
效果图如下：
文字绘制效果图.png
网友评论