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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,612评论 5 471
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,345评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,625评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,022评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,974评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,227评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,688评论 3 392
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,358评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,490评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,402评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,446评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,126评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,721评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,802评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,013评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,504评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,080评论 2 341

推荐阅读更多精彩内容