Quartz2D－－iOS下的图形绘制

一、基本介绍

Quartz 2D是一个二维绘图引擎，Quartz 2D的API是C语言，来自CoreGraphics框架，没有面向对象的思想。

 1.作用：绘制图形：线条、三角形、矩形、圆、弧等

 绘制文字

 绘制、生成图片（图形）

 读取、生成PDF

 截图、裁剪图片

 自定义UI控件

 2.图形上下文（Graphics Context）:是一个CGContextRef类型的数据

 

 图形上下文的作用：1.保存绘图信息、绘图状态

 2.决定绘制的输出目标（绘制到什么地方，输出目标可以是PDF文件、Bitmap或者显示器的窗口上）

 

二、Quartz 2D基本图形绘制

1.线段、矩形、三角形的绘制

新建工程，新建 DrawLine 类继承UIView，在storyboard拖拽一个View，关联DrawLine类，在DrawLine中实现图形绘制代码

 

#import "DrawLine.h"

@implementation DrawLine


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.


//系统自动调用 drawRect 方法，当视图显示在屏幕上的时候调用，并且只会被调用一次
//而当它的内容需要更新的时候，也会被调用，那个调用需要通过setNeedsDisplayInRect
- (void)drawRect:(CGRect)rect {

    //画一条线段
    drawline();
    
    //画两条线段
    drawline2();
    
    //画矩形
    drawR();
    
    //画三角形
    drawTriangle();
    
}


/** Quartz 2D的API是C语言,所以要用C的ff */

//画线

//画一条线段
void drawline(){
    //1.获得图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //2.绘制图形
    
    //2.1 设置线段的宽度
    //参数1:图形上下文
    //参数2:宽度
    CGContextSetLineWidth(context, 10);
    
    //2.2 设置线条的颜色
    //空心的颜色
    CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
    
    //2.3 设置起点
    //参数1:图形上下文
    //参数2:起点x坐标
    //参数3:起点y坐标
    CGContextMoveToPoint(context, 10, 10);
    
    //画线（添加线条）
    CGContextAddLineToPoint(context, 100, 100);
    
    //3.将绘制的图形显示到View上
    //以空心的方式画出
    CGContextStrokePath(context);
}

//画两条线段
void drawline2(){
    //获得图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //设置线段的宽度
    //参数1:图形上下文
    //参数2:宽度
    CGContextSetLineWidth(context, 10);

    
    //2条线条
    [[UIColor blueColor] set];
    
    //设置线条头尾部的样式
    //参数2:头尾部的样式
    //kCGLineCapButt,线条头尾部比较大
    //kCGLineCapRound,线条头尾部圆形
    //kCGLineCapSquare,线条头尾部是方形
    CGContextSetLineCap(context, kCGLineCapRound);
    
    //设置线段转折点样式
    //参数2:转折点样式
    //kCGLineJoinMiter,
    //kCGLineJoinRound,
    //kCGLineJoinBevel
    CGContextSetLineJoin(context, kCGLineJoinRound);
    
    //设置起点
    CGContextMoveToPoint(context, 100, 100);
    //画线（添加线条）
    CGContextAddLineToPoint(context, 150, 120);
    CGContextAddLineToPoint(context, 150, 180);
    CGContextStrokePath(context);
}

//画矩形，系统提供了方法
void drawR(){
    //1.获得图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //2.绘制四边形
    //参数1:图形上下文
    //参数2:CGRect rect
    CGContextAddRect(context,  CGRectMake(200, 30, 120, 180));//这个系统提供的绘制四边形的方法，四边形的边会与x,y轴平行。我们可以通过旋转View，或者用CGContextAddLineToPoint方法自定义
    
    //设置颜色
    [[UIColor purpleColor] setFill];//实心颜色
    
    //3.显示在View上
    CGContextFillPath(context);//实心图案
}


//画三角形
void drawTriangle(){
    //1.获取图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //2.绘制三角形
    //确定起点
    CGContextMoveToPoint(context, 0, 0);
    //添加线条
    CGContextAddLineToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 150, 100);
    
    //调用系统提供的方法关闭路径
    CGContextClosePath(context);
    
    //设置一下颜色
    [[UIColor yellowColor] set];
    
    //显示到view上
    CGContextStrokePath(context);
    
}


@end

以上代码输出样式：

另外利用图形上下文栈，可以控制线条的样式，代码如下：

//画一条线段
void drawline(){
    //1.获得图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //将上下文拷贝一份放到栈中
    CGContextSaveGState(context);
    
    //2.绘制图形
    //第1条线
    //2.1 设置线段的宽度
    //参数1:图形上下文
    //参数2:宽度
    CGContextSetLineWidth(context, 20);
    
    //设置线条头尾部的样式
    CGContextSetLineCap(context, kCGLineCapRound);
    
    //2.2 设置线条的颜色
    //空心的颜色
    CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
    
    //2.3 设置起点
    //参数1:图形上下文
    //参数2:起点x坐标
    //参数3:起点y坐标
    CGContextMoveToPoint(context, 10, 10);
    
    //画线（添加线条）
    CGContextAddLineToPoint(context, 100, 100);
    
    //3.将绘制的图形显示到View上
    //以空心的方式画出
    CGContextStrokePath(context);
    
    //将图形上下文出栈,替换当前的上下文
    CGContextRestoreGState(context);
    
    //2条线条
    [[UIColor blueColor] set];
    
    //设置线条头尾部的样式
    //参数2:头尾部的样式
    //kCGLineCapButt,线条头尾部比较大
    //kCGLineCapRound,线条头尾部圆形
    //kCGLineCapSquare,线条头尾部是方形
    CGContextSetLineCap(context, kCGLineCapRound);
    
    //设置线段转折点样式
    //参数2:转折点样式
    //kCGLineJoinMiter,
    //kCGLineJoinRound,
    //kCGLineJoinBevel
    CGContextSetLineJoin(context, kCGLineJoinRound);
    
    //设置起点
    CGContextMoveToPoint(context, 120, 120);
    //画线（添加线条）
    CGContextAddLineToPoint(context, 150, 120);
    CGContextAddLineToPoint(context, 150, 180);
    CGContextStrokePath(context);
}

图片效果：

 

 

 

 

 

 

2.圆形、弧形、文字、图片的绘制

新建一个类 DrawCircle 继承 UIView ,把storyboard里的View关联该类，然后实现代码

 

#import "DrawCircle.h"

//求弧度的方法
CGFloat arc(CGFloat angle){
    return angle * (M_PI / 180);
}

@implementation DrawCircle


- (void)drawRect:(CGRect)rect {

    //圆形
    drawCircle();
    
    //画圆弧
    drawArc();
    
    //文字
    drawText();
    
    //图片
    //绘制图片
    drawImg();
}

//圆形
void drawCircle(){
    //1.获取图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //2.绘制图形
    //系统画椭圆的方法,如果把宽度和高度设为一样就是圆形了
    //参数1:图形上下文
    //参数2:CGRect rect
    CGContextAddEllipseInRect(context, CGRectMake(50, 50, 80, 100));
    //设置线条的宽度
    CGContextSetLineWidth(context, 5);
    //3.显示在View上
    CGContextStrokePath(context);
    
}

//弧形
void drawArc(){
    //1.获取图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //2.绘制图形
    //系统提供画圆弧的方法
    //参数1:图形上下文
    //参数2:圆心所在的x坐标
    //参数3:圆心所在的y坐标
    //参数4:半径
    //参数5:开始的角度
    //参数6:结束的角度
    //参数7:旋转方向，1-－>顺时针，0-－>逆时针
    CGContextAddArc(context, 150, 150, 50, arc(0), arc(90), 0);
    
    //3.显示
    CGContextFillPath(context);
}

//绘制文字
void drawText(){
    
    NSString * str = @"绘制文字";
    
    NSMutableDictionary * attributes = [NSMutableDictionary dictionary];
    attributes[NSFontAttributeName] = [UIFont systemFontOfSize:20];//设置文字大小
    attributes[NSForegroundColorAttributeName] = [UIColor purpleColor];//设置文字的颜色
   
    //在这里中，绘制文字的方法是直接调用OC中的方法，所以不需要获得图形上下文,直接调用
    //参数1:文字的位置和宽高
    //参数2:字典
    [str drawInRect:CGRectMake(200, 100, 100, 100) withAttributes:attributes];

}

//绘制图片
void drawImg(){
    //1.因为绘制图片也是调用OC的方法，所以不需要拿到图形上下文，只需要拿到图片即可
    //取得图片
    UIImage * img = [UIImage imageNamed:@"广州.png"];
    
    //2.画图片
    [img drawAtPoint:CGPointMake(5, 300)];//在哪个点画图片
    
    //3.该方法规定了图片的高度和宽度
//    img drawInRect:CGRectMake(<#CGFloat x#>, <#CGFloat y#>, <#CGFloat width#>, <#CGFloat height#>)
    
    //4.这个方法规定了 按图片高度和宽度来使用填充
//    img drawAsPatternInRect:CGRectMake(<#CGFloat x#>, <#CGFloat y#>, <#CGFloat width#>, <#CGFloat height#>)
    
    //在图片上绘制文字，即水印
    NSString * str = @"广州";
    [str drawInRect:CGRectMake(10, 300, 100, 40) withAttributes:nil];
}



@end

运行效果：

3.补充:贝塞尔曲线

贝塞尔曲线:是由线段和节点构成的，它的节点是可以移动的，线段就像橡皮筋一样随着节点和变化

示例代码：

//贝塞尔曲线:是由线段和节点构成的，它的节点是可以移动的，线段就像橡皮筋一样随着节点和变化
void drawBezier(){
    //1.取得图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //贝塞尔曲线有四个节点，一个起点，一个终点，还有两个控制点
    
    //设置起点
    CGContextMoveToPoint(context, 10, 10);
    
    //添加2个控制点
    //参数1:图形上下文
    //参数2:第一个控制点的x坐标
    //参数3:第一个控制点的y坐标
    //参数4:第二个控制点的x坐标
    //参数5:第二个控制点的y坐标
    //参数6:终点的x坐标
    //参数7:终点的y坐标
    CGContextAddCurveToPoint(context, 120, 100, 180, 50, 190, 190);
    
    //系统中还有一个方法添加1个控制点
    //参数1:图形上下文
    //参数2:第一个控制点的x坐标
    //参数3:第一个控制点的y坐标
    //参数4:终点的x坐标
    //参数5:终点的y坐标
//    CGContextAddQuadCurveToPoint(context, 150, 200, 200, 100);
    
    //显示到View上
    CGContextStrokePath(context);
}

运行效果：

三、使用Quartz 2D绘制小黄人

在storyboard中的View关联创建的 DrawHuman 类，实现代码

#import "DrawHuman.h"

//半径
#define JKRadius 70
//Y坐标
#define JKTopY 100
//颜色
#define JKColor(r,g,b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1]

@implementation DrawHuman


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {

    //1.图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //画身体
    drawBody(context,rect);
    
    //画嘴巴
    drawMouse(context,rect);
    
    //画眼睛
    drawEyes(context,rect);
}

//画身体
void drawBody(CGContextRef context,CGRect rect){
    //1.上半圆的画法
    CGFloat topX = rect.size.width * 0.5;
    CGFloat topY = JKTopY;
    CGFloat topRadius = JKRadius;
    //圆心坐标，topX，topY
    //半径，topRadius
    //开始角度，0
    //结束角度，M_PI
    //方向，1顺时针
    CGContextAddArc(context, topX, topY, topRadius, 0, M_PI , 1);
    

    //2.向下延伸 的直线
    CGFloat middleX = topX - topRadius;//向下延伸的X坐标
    CGFloat middleH = JKTopY;//向下延伸的高度
    CGFloat middleY = JKTopY + 100;//Y轴的高度
    //添加一条直线
    CGContextAddLineToPoint(context, middleX, middleY);
    

    //3.下半圆
    CGFloat bottomX = topX;
    CGFloat bottomY = middleY;
    CGFloat bottomRadius = topRadius;
    CGContextAddArc(context, bottomX, bottomY, bottomRadius, M_PI, 0, 1);
    
    //合并路径
    CGContextClosePath(context);

    
    //设置颜色
    [JKColor(252,218,0) set];
    
    //显示在View上
    CGContextFillPath(context);
}

//画嘴巴
void drawMouse(CGContextRef context,CGRect rect){
    //设置一个控制点
    CGFloat controlX = rect.size.width * 0.5;
    CGFloat controlY = rect.size.height * 0.3;
    
    //设置当前点
    // x y 轴的距离
    CGFloat marginX = 20;
    CGFloat marginY = 10;
    //当前点，即贝塞尔曲线的起点位置
    CGFloat currentX = controlX - marginX;
    CGFloat currentY = controlY - marginY;
    CGContextMoveToPoint(context, currentX, currentY);
    
    //结束点
    CGFloat endX = controlX + marginX;
    CGFloat endY = currentY;
    
    //贝塞尔曲线
    CGContextAddQuadCurveToPoint(context, controlX, controlY, endX, endY);
    
    //设置颜色
    [[UIColor blackColor] set];
    
    //显示到View上
    CGContextStrokePath(context);
}

//画眼睛
void drawEyes(CGContextRef context,CGRect rect){
    
    //1.黑色绑带
    CGFloat startX = rect.size.width * 0.5 - JKRadius;
    CGFloat startY = JKTopY;
    //将线段移动到起点
    CGContextMoveToPoint(context, startX, startY);
    
    //设置终点的值
    CGFloat endx = startX + 2*JKRadius;
    CGFloat endY = JKTopY;
    
    //画线
    CGContextAddLineToPoint(context, endx, endY);
    CGContextSetLineWidth(context, 15);
    [[UIColor blackColor] set];
    
    //显示到View上
    CGContextStrokePath(context);
    
    //灰色镜框
    [JKColor(61,62,66) set];
    CGFloat kuangRadius = JKRadius * 0.4;
    CGFloat kuangY = startY;
    CGFloat kuangX = rect.size.width * 0.5 - kuangRadius;
    CGContextAddArc(context, kuangX + 25, kuangY, kuangRadius, 0, M_PI * 2, 0);
    CGContextFillPath(context);
    
    //里面的白色框
    [[UIColor whiteColor] set];
    CGFloat whiteRadius = kuangRadius * 0.7;
    CGFloat whiteY = kuangY;
    CGFloat whiteX = kuangX;
    CGContextAddArc(context, whiteX + 25, whiteY, whiteRadius, 0, M_PI * 2, 0);
    CGContextFillPath(context);
    
    //眼睛
    [[UIColor blackColor]set];
    CGFloat blackRadius = whiteRadius * 0.5;
    CGFloat blackX = whiteX;
    CGFloat blackY = whiteY;
    CGContextAddArc(context, blackX + 25, blackY, blackRadius, 0, M_PI * 2, 0);
    CGContextFillPath(context);
    
}


@end

运行效果：