Quartz 2D基本绘图

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

上一节中，我引用别人的文章，详细的讲解了Quartz 2D的基本概念。想了解的，请点击这里。这一节用几个小Demo，来说明Quartz 2D的绘图功能。 

1. 我们先定义一个用来绘图的View（DrawView，它继承自UIView），并准备在下面的方法中实现绘图工作。

- (void)drawRect:(CGRect)rect;

2. 在主界面上面拖拽一个View，并且将其Class设置为DrawView。

首先，我们来绘制线段，三角形和矩形。

1. 线段：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(ccr, 5);

    CGContextSetLineCap(ccr, kCGLineCapRound);
   
    [[UIColor greenColor] setStroke];
    
    CGContextMoveToPoint(ccr, 10, 10);
    
    CGContextAddLineToPoint(ccr, 150, 150);
    
    CGContextStrokePath(ccr);
    
    
    [[UIColor blueColor] set];
    
    CGContextSetLineJoin(ccr, kCGLineJoinRound);
    
    CGContextMoveToPoint(ccr, 200  , 200);
    
    CGContextAddLineToPoint(ccr, 180, 40);
    CGContextAddLineToPoint(ccr, 100, 100);
    
    CGContextStrokePath(ccr);
    
    CGContextRelease(ccr);

UIGraphicsGetCurrentContext() 方法是用来获取上下文对象，用于最终绘制图形。

CGContextSetLineWidth方法用于设置线宽。

CGContextSetLineCap 用来设置线的两端显示效果, 它是一个枚举，我们可以自己选择效果。

enum CGLineCap {
    kCGLineCapButt,
    kCGLineCapRound,
    kCGLineCapSquare
};
typedef enum CGLineCap CGLineCap;

在Quartz 2D中，关于颜色的设置，有以下几种情况：

方法一：

CGContextSetRGBStrokeColor(context, r, g, b, a);

方法二：

[UIColor redColor] setStroke]; 

方法三：

[UIColor redColor] set]; 

setStroke 只针对边框，set不管是边框还是内部，全部填充。

CGContextMoveToPoint 方法，表明绘制的起点。

CGContextAddLineToPoint 方法， 表明绘制的终点。

CGContextStrokePath 方法，用什么样的方式开始绘制路径。

CGContextSetLineJoin 方法，设置线段交界处的样式。

enum CGLineJoin {
    kCGLineJoinMiter,
    kCGLineJoinRound,
    kCGLineJoinBevel
};
typedef enum CGLineJoin CGLineJoin;

CGContextRelease 方法，释放上下文对象。

最终效果图：

2. 三角形：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();
    
    CGContextMoveToPoint(ccr, 10, 10);
    CGContextAddLineToPoint(ccr, 150, 150);
    CGContextAddLineToPoint(ccr, 180, 40);
    CGContextClosePath(ccr);
    // 空心
    //CGContextStrokePath(ccr);
    // 实心
    CGContextFillPath(ccr);
    
    CGContextRelease(ccr);

三角形的绘制，其实就是多条线段的连接。效果图如下：

3. 矩形：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();
    
    CGContextAddRect(ccr, CGRectMake(10, 10, 100, 100));
    
    CGContextStrokePath(ccr);
    
    CGContextRelease(ccr);

如果没有指定绘制颜色，默认就是黑色。效果图如下：

4. 椭圆：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();
    
    // 椭圆
    CGContextAddEllipseInRect(ccr, CGRectMake(20, 20, 100, 100));
    
    // 通过设置圆的线宽可以实现圆环
    CGContextSetLineWidth(ccr, 10);
    
    CGContextAddEllipseInRect(ccr, CGRectMake(160, 20, 40, 100));
    
    // 通过设置圆的线宽可以实现圆环
    CGContextSetLineWidth(ccr, 5);
    
    CGContextStrokePath(ccr);
    
    CGContextRelease(ccr);

CGContextAddEllipseInRect 方法是用来绘制椭圆的，可以看出，指定的绘制区域如果宽高一致的画，绘制出来的就是圆，否则为椭圆。效果图如下：

5. 圆弧：在drawRect:方法中，写入以下代码：

CGContextRef ccr = UIGraphicsGetCurrentContext();
    
    CGContextMoveToPoint(ccr, 100, 100);
    CGContextAddLineToPoint(ccr, 100, 150);
    
    CGContextAddArc(ccr, 100, 100, 50, M_PI_2, M_PI*1.8, 0);
    CGContextClosePath(ccr);
    
    [[UIColor redColor] set];
    
    CGContextFillPath(ccr);
    
    CGContextRelease(ccr);

CGContextAddArc方法，就是用来绘制圆弧的。参数1：上下文；参数2，3：圆心；参数4：半径；参数5，6：绘制弧度的起始与终点。参数7：顺时针还是逆时针。效果图如下：

6. 绘制文字和图片：在drawRect:方法中，写入以下代码：

- (void)drawText {
    NSString *str = @"I love you";
    
    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    attrs[NSForegroundColorAttributeName] = [UIColor blueColor];
    attrs[NSFontAttributeName] = [UIFont systemFontOfSize:18];
    
    [str drawAtPoint:CGPointMake(50, 50) withAttributes:attrs];
}

- (void)drawImage {
    UIImage *image = [UIImage imageNamed:@"me"];
    [image drawAtPoint:CGPointZero];
}

注： 画文字和图片不需要上下文，因为是直接使用的OC对象，而不是c语言。