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);
效果图如下:
二、画矩形
第一种方法
// 画长方形
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);
效果图:
三、画圆形
第一种方法
//第一种方法
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);
四、绘制贝塞尔曲线
// 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);
四、绘制图片
//绘制图片
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)];
效果图如下:
五、绘制文字
在讲述绘制文字的时候,先总结一下有关富文本的东西。
属性名字 | 属性意义 | 属性参数 |
---|---|---|
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];
效果图如下: