Core Graphics 绘图&2d形变

绘图

iOS图像处理之Core Graphics和OpenGL ES初见
iOS支持两套图形API族：Core Graphics/QuartZ 2D 和OpenGL ES。OpenGL ES是跨平台的图形API，属于OpenGL的一个简化版本。QuartZ 2D是苹果公司开发的一套API，它是Core Graphics Framework的一部分，是一套基于C的API框架，使用了Quartz作为绘图引擎。它提供了低级别、轻量级、高保真度的2D渲染。该框架可以用于基于路径的绘图、变换、颜色管理、脱屏渲染，模板、渐变、遮蔽、图像数据管理、图像的创建、遮罩以及PDF文档的创建、显示和分析。

Core Graphics的图形上下文(必须)

使用Core Graphics之前需要指定一个用于绘图的图形上下文（CGContextRef），这个图形上下文会在每个绘图函数中都会被用到。如果你持有一个图形上下文context：参数，那么你等同于有了一个图形上下文，这个上下文也许就是你需要用来绘图的那个。三种获得图形上下文的方法（drawRect:、drawRect: inContext:、UIGraphicsBeginImageContextWithOptions）。

获取图形上下问方式

1. 自己创建一个图片类型的上下文。

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

UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
CGContextRef con = UIGraphicsGetCurrentContext();
//画图
....
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

2. 利用cocoa为你生成的图形上下文。

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

- (void) drawRect: (CGRect) rect 
或
- (void)drawLayer:(CALayer*)lay inContext:(CGContextRef)con

如果当前处于UIGraphicsBeginImageContextWithOptions函数或drawRect：方法中，并没有引用一个上下文。为了使用Core Graphics，你可以调用UIGraphicsGetCurrentContext函数获得当前的图形上下文。

在contextRef 图形上下文中，绘制图形

1.根据路径绘图

//获取图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();


    //创建路径
    CGPathRef path = CGPathCreateWithRect(CGRectMake(100, 100, 100, 100), nil);


    //添加路径
    CGContextAddPath(context, path);

    //设置颜色
    CGContextSetRGBStrokeColor(context, 1.0, 0, 0, 1);

    //绘制
    CGContextDrawPath(context, kCGPathFillStroke);

    //删除路径
    CGPathRelease(path);

CGContextRef 文档解析

CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文                
CGContextMoveToPoint 开始画线
CGContextAddLineToPoint 画直线

CGContextAddEllipseInRect 画一椭圆
CGContextSetLineCap 设置线条终点形状
CGContextSetLineDash 画虚线
CGContextAddRect 画一方框
CGContextStrokeRect 指定矩形
CGContextStrokeRectWithWidth 指定矩形线宽度
CGContextStrokeLineSegments 一些直线


CGContextAddArc 画已曲线 前俩店为中心 中间俩店为起始弧度 最后一数据为0则顺时针画 1则逆时针
CGContextAddArcToPoint(context,0,0, 2, 9, 40);//先画俩条线从point 到 弟1点 ， 从弟1点到弟2点的线  切割里面的圆   
CGContextSetShadowWithColor 设置阴影   
CGContextSetRGBFillColor 这只填充颜色
CGContextSetRGBStrokeColor 画笔颜色设置    
CGContextSetFillColorSpace 颜色空间填充   
CGConextSetStrokeColorSpace 颜色空间画笔设置
CGContextFillRect 补充当前填充颜色的rect
CGContextSetAlaha 透明度


CGContextTranslateCTM 改变画布位置
CGContextSetLineWidth 设置线的宽度
CGContextAddRects 画多个线
CGContextAddQuadCurveToPoint 画曲线
CGContextStrokePath 开始绘制图片
CGContextDrawPath 设置绘制模式
CGContextClosePath 封闭当前线路
CGContextTranslateCTM(context, 0, rect.size.height);    
CGContextScaleCTM(context, 1.0, -1.0);反转画布      
CGContextSetInterpolationQuality 背景内置颜色质量等级 
CGImageCreateWithImageInRect 从原图片中取小图

CGContextEOFillPath 使用奇偶规则填充当前路径     
CGContextFillPath 使用非零绕数规则填充当前路径
CGContextFillRect 填充指定的矩形 
CGContextFillRects 填充指定的一些矩形 
CGContextFillEllipseInRect 填充指定矩形中的椭圆 
CGContextDrawPath 两个参数决定填充规则，kCGPathFill表示用非零绕数规则，kCGPathEOFill表示用奇偶规则，kCGPathFillStroke表示填充， kCGPathEOFillStroke表示描线，不是填充

CGPath 文档解析

//Creating and Managing Paths
CGPathCreateMutable  创建一个可变的图形路径。
CGPathCreateWithEllipseInRect   创建一个椭圆的不可变路径。
CGPathCreateWithRect    创建一个矩形的不可变路径。
CGPathCreateWithRoundedRect 创建一个圆角矩形的不可变路径。
CGPathCreateCopy    创建一个图形路径的不可变副本。
CGPathCreateCopyByTransformingPath  创建由变换矩阵变换的图形路径的不可变副本。
CGPathCreateCopyByDashingPath  创建另一个路径的虚线副本。
CGPathCreateCopyByStrokingPath   创建另一个路径的实线副本。
CGPathCreateMutableCopy    创建一个现有的图形路径可复制。
CGPathCreateMutableCopyByTransformingPath  创建一个图形路径的变换矩阵将可变副本。
CGPathRelease      减少图形路径
CGPathRetain        递增一个图形路径的保留计数。

//Modifying Quartz Paths
CGPathAddArc   追加一个弧一个可变的图形路径，可能前面的直线段。
CGPathAddRelativeArc   追加一个弧一个可变的图形路径，可能前面的直线段。
CGPathAddArcToPoint  追加一个弧一个可变的图形路径，可能前面的直线段。
CGPathAddCurveToPoint  追加一次Bézier曲线é个可变图形路径。
CGPathAddLines  追加新的线段图形路径数组的一个可变的。
CGPathAddLineToPoint   追加一条线段一个可变的图形路径。
CGPathAddPath   添加一个路径到一个可变的图形路径。
CGPathAddQuadCurveToPoint   追加一次Bézier曲线é个可变图形路径。

CGPathAddRect   添加一个矩形，一个可变的图形路径。
CGPathAddRects  追加矩形可变图形路径数组。
CGPathAddRoundedRect   添加一个圆角矩形可变图形路径。
CGPathApply   每个元素的图形路径中，调用一个自定义应用功能。
CGPathMoveToPoint   开始在一个可变的图形路径指定一个位置，一个新的子路径。
CGPathCloseSubpath   关闭和一个可变的图形路径完成子路径。
CGPathAddEllipseInRect   添加一个路径，一个适合矩形内的椭圆。

//Getting Information about Quartz Paths
CGPathEqualToPath  指示是否两个图形路径是等效的。
CGPathGetBoundingBox  返回包含在图形路径中的所有点的包围盒。
CGPathGetPathBoundingBox   返回图形路径的包围盒
CGPathGetCurrentPoint   返回图形路径中的当前点。
CGPathGetTypeID   返回用于石英图形路径的核心基础类型标识符。
CGPathIsRect     指出是否代表一个矩形图形路径。
CGPathContainsPoint  检查一个点是否包含在图形路径中。
CGLineCap   用于渲染一个行的端点的样式。
CGLineJoin   用于线的连接类型。

2.绘制字符串

[self.title drawInRect:CGRectMake(0, 0, 100, 40) withAttributes:@{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:15]}];

3.用图片画图

画图片 
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
    
    UIImage *img = [UIImage imageNamed:@"1.png"];
    [img drawInRect:CGRectMake(0, 0, 50, 50)];
    UIImage *newImg = [UIImage imageNamed:@"2.png"];
    [newImg drawInRect:CGRectMake(60, 0, 60, 60)];
    
    UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    UIImageView *imageView = [[UIImageView alloc] initWithImage:im];
    imageView.frame = CGRectMake(100, 100, 200, 40);
    [self.view addSubview:imageView];

4.绘制渐变色

   CGContextClip(context);
    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
    CGFloat colors[] =    {  204.0 / 255.0, 224.0 / 255.0, 244.0 /  255.0, 1.00,
        29.0 / 255.0, 156.0 / 255.0, 215.0 / 255.0, 1.00, 0.0 /
        255.0,  50.0 / 255.0, 126.0 / 255.0, 1.00,
    };
    CGGradientRef gradient =CGGradientCreateWithColorComponents (rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));
    CGColorSpaceRelease(rgb);
    CGContextDrawLinearGradient(context,gradient,CGPointMake(0.0,0.0),CGPointMake(0.0,self.frame.size.height), kCGGradientDrawsBeforeStartLocation);

CGAffineTransform- 2d形变

CGAffineTransform是core graphics 框架下的一个结构体。CGAffineTransform是一个用于处理形变的类,其可以改变控件的平移、缩放、旋转等,其坐标系统采用的是二维坐标系,即向右为x轴正方向,向下为y轴正方向

CGAffineTransform 使用UIView提供的动画方法，在block中修改transform即可实现动画效果。

在UIView中有一个transform属性便是专门用来控制形变的,其使用方法如下:

• CGAffineTransformMakeTranslation实现以初始位置为基准,在x轴方向上平移x单位,在y轴方向上平移y单位

// 格式
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
// 样例
self.demoImageView.transform = CGAffineTransformMakeTranslation(100, 100);

注: 当tx为正值时,会向x轴正方向平移,反之,则向x轴负方向平移;当ty为正值时,会向y轴正方向平移,反之,则向y轴负方向平移

• CGAffineTransformMakeScale实现以初始位置为基准,在x轴方向上缩放x倍,在y轴方向上缩放y倍

// 格式
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
// 样例
self.demoImageView.transform = CGAffineTransformMakeScale(2, 0.5);

注: 当sx为正值时,会在x轴方向上缩放x倍,反之,则在缩放的基础上沿着竖直线翻转;当sy为正值时,会在y轴方向上缩放y倍,反之,则在缩放的基础上沿着水平线翻转

• CGAffineTransformMakeRotation实现以初始位置为基准,将坐标系统逆时针旋转angle弧度(弧度=π/180×角度,M_PI弧度代表180角度)

// 格式
CGAffineTransformMakeRotation(CGFloat angle)
// 样例
self.demoImageView.transform = CGAffineTransformMakeRotation(M_PI*0.5);

注1: 当angle为正值时,逆时针旋转坐标系统,反之顺时针旋转坐标系统
注2: 逆时针旋转坐标系统的表现形式为对控件进行顺时针旋转

相对形变

CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)

drawRect 方法手动调用

uiview 的属性：setNeedsDisplay