iOS 绘图

2017-10-18 本文已影响16人 iOS_肖晨

转自：iOS绘图—— UIBezierPath 和 Core Graphics
绘图进阶请参考：绘图

前言

iOS系统本身提供了两套绘图的框架，即UIBezierPath 和 Core Graphics。而前者所属UIKit，其实是对Core Graphics框架关于path的进一步封装，所以使用起来比较简单。但是毕竟Core Graphics更接近底层，所以它更加强大。

UIBezierPath

可以创建基于矢量的路径，例如椭圆或者矩形，或者有多个直线和曲线段组成的形状。
使用UIBezierPath，你只能在当前上下文中绘图，所以如果你当前处于UIGraphicsBeginImageContextWithOptions函数或drawRect：方法中，你就可以直接使用UIKit提供的方法进行绘图。如果你持有一个context：参数，那么使用UIKit提供的方法之前，必须将该上下文参数转化为当前上下文。幸运的是，调用UIGraphicsPushContext 函数可以方便的将context：参数转化为当前上下文，记住最后别忘了调用UIGraphicsPopContext函数恢复上下文环境。

简言之：我们一般使用UIBezierPath都是在重写的drawRecrt方法这种情形。其绘图的步骤是这样的：

重写drawRect方法。但不需要我们自己获取当前上下文context；
创建相应图形的UIBezierPath对象，并设置一些修饰属性；
渲染，完成绘制。

// 1.重写drawRect方法
- (void)drawRect:(CGRect)rect {
    // 2.创建图形相应的UIBezierPath对象
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 50)];
    // 设置一些修饰属性
    path.lineWidth = 28.0;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    UIColor *color = [UIColor colorWithRed:0 green:0 blue:0.7 alpha:1];
    [color set];
    
    // 4.渲染，完成绘制
    [path stroke];
}

效果如下：

Core Graphics

这是一个绘图专用的API族，它经常被称为QuartZ或QuartZ 2D。Core Graphics是iOS上所有绘图功能的基石，包括UIKit。

要搞清楚Core Graphics就要搞清楚下面几个问题：

1. 绘图需要 CGContextRef

CGContextRef即图形上下文。可以这么理解，我们绘图是需要一个载体或者说输出目标，它用来显示绘图信息，并且决定绘制的东西输出到哪个地方。可以形象的比喻context就像一个“画板”，我们得把图形绘制到这个画板上。所以，绘图必须要先有context。

2. 怎么拿到context？

第一种方法是利用cocoa为你生成的图形上下文。当你子类化了一个UIView并实现了自己的drawRect：方法后，一旦drawRect：方法被调用，Cocoa就会为你创建一个图形上下文，此时你对图形上下文的所有绘图操作都会显示在UIView上。

第二种方法就是创建一个图片类型的上下文。调用UIGraphicsBeginImageContextWithOptions函数就可获得用来处理图片的图形上下文。利用该上下文，你就可以在其上进行绘图，并生成图片。调用UIGraphicsGetImageFromCurrentImageContext函数可从当前上下文中获取一个UIImage对象。记住在你所有的绘图操作后别忘了调用UIGraphicsEndImageContext函数关闭图形上下文。

简言之：

重写UIView的drawRect方法，在该方法里便可得到context；
调用UIGraphicsBeginImageContextWithOptions方法得到context；

3. 注意

并不是说一提到绘图，就一定得重写drawRect方法，只是因为通常情况下我们一般采用在drawRect方法里获取context这种方式。

4. drawRect方法什么时候触发

1.当view第一次显示到屏幕上时；
2.当调用view的setNeedsDisplay或者setNeedsDisplayInRect:方法时。

步骤：

1.先在drawRect方法中获得上下文context；
2.绘制图形（线，图形，图片等）；
3.设置一些修饰属性；
4.渲染到上下文，完成绘图。

- (void)drawRect:(CGRect)rect {
    // 1.获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    // --------------------------实心圆
    // 2.画图
    CGContextAddEllipseInRect(context, CGRectMake(10, 10, 50, 50));
    [[UIColor greenColor] set];
    // 3.渲染
    CGContextFillPath(context);
    
    // --------------------------空心圆
    
    CGContextAddEllipseInRect(context, CGRectMake(70, 10, 50, 50));
    [[UIColor redColor] set];
    CGContextStrokePath(context);
    
    
    
    // --------------------------椭圆
    //画椭圆和画圆方法一样，椭圆只是设置不同的长宽
    CGContextAddEllipseInRect(context, CGRectMake(130, 10, 100, 50));
    [[UIColor purpleColor] set];
    CGContextFillPath(context);
    
    
    
    // --------------------------直线
    CGContextMoveToPoint(context, 20, 80); // 起点
    CGContextAddLineToPoint(context, self.frame.size.width-10, 80); //终点
    //    CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0); // 颜色
    [[UIColor redColor] set]; // 两种设置颜色的方式都可以
    CGContextSetLineWidth(context, 2.0f); // 线的宽度
    CGContextSetLineCap(context, kCGLineCapRound); // 起点和重点圆角
    CGContextSetLineJoin(context, kCGLineJoinRound); // 转角圆角
    CGContextStrokePath(context); // 渲染（直线只能绘制空心的，不能调用CGContextFillPath(ctx);）
    
    
    
    // --------------------------三角形
    CGContextMoveToPoint(context, 10, 150); // 第一个点
    CGContextAddLineToPoint(context, 60, 100); // 第二个点
    CGContextAddLineToPoint(context, 100, 150); // 第三个点
    [[UIColor purpleColor] set];
    CGContextClosePath(context);
    CGContextStrokePath(context);
    
    
    
    // --------------------------矩形
    CGContextAddRect(context, CGRectMake(20, 170, 100, 50));
    [[UIColor orangeColor] set];
    //    CGContextStrokePath(ctx); // 空心
    CGContextFillPath(context);
    
    
    
    // --------------------------圆弧
    CGContextAddArc(context, 200, 170, 50, M_PI, M_PI_4, 0);
    CGContextClosePath(context);
    CGContextFillPath(context);
    
    
    // --------------------------文字
    NSString *str = @"你在红楼，我在西游";
    NSMutableDictionary *dict = [NSMutableDictionary dictionary];
    dict[NSForegroundColorAttributeName] = [UIColor whiteColor]; // 文字颜色
    dict[NSFontAttributeName] = [UIFont systemFontOfSize:14]; // 字体
    
    [str drawInRect:CGRectMake(20, 250, 300, 30) withAttributes:dict];
    
    
    // --------------------------图片
    UIImage *img = [UIImage imageNamed:@"yingmu"];
    //    [img drawAsPatternInRect:CGRectMake(20, 280, 300, 300)]; // 多个平铺
    //    [img drawAtPoint:CGPointMake(20, 280)]; // 绘制到指定点，图片有多大就显示多大
    [img drawInRect:CGRectMake(20, 280, 80, 80)]; // 拉伸
}