iOS-CoreGraphics图形库

一. 介绍

Core Graphics 和Quartz 2D的区别

Core Graphics是基于C的API，可以用于一切绘图操作
quartz是一个通用的术语，用于描述在iOS和MAC OS X ZHONG 整个媒体层用到的多种技术包括图形、动画、音频、适配。
Quart 2D 是一组二位绘图和渲染API，Core Graphic会使用到这组API
Quartz Core 专指Core Animation用到的动画相关的库、API和类

点和像素的对比

系统拥有坐标系，如320*480硬件有retain屏幕和非retain屏：如320*480、640*960
Core Graphics 使用的是系统的坐标系来绘制图片。在分辨率为640*960手机上绘制图片时，实际上Core Graphics 的坐标是320*480。这个时候每个坐标系上的点，实际上拥有两个像素。

CoreGraphics

CoreGraphics是苹果的⼀个二维绘图框架, CoreGraphics的API是纯C语⾔的, 同时支持iOS和Mac系统

CoreGraphics能完成的工作：
绘制图形 : 线条\三角形\矩形\圆\弧等
绘制文字
绘制\生成图片(图像)
读取\生成PDF
截图\裁剪图片
通过绘制自定义View

CoreGraphics在iOS开发中的价值 :
为了便于搭建美观的UI界面,iOS提供了UIKit框架,⾥⾯有各种各样的UI控件UILabel,UIImageView,UIButton等
利⽤UIKit框架提供的控件能现实一些常见的UI界⾯
但是,有些UI界面极其复杂、⽽且⽐较个性化,⽤普通的UI控件无法实现,这时可以利用CoreGraphics将控件内部的结构画出来,自定义控件的样子

其实,iOS中⼤部分控件的内容都是通过CoreGraphics画出来的
因此, CoreGraphics在iOS开发中很重要的⼀个价值是:通过绘制自定义View

Graphics Context

图形上下文(Graphics Context):是一个CGContextRef类型的数据

图形上下文的作用:
(1)保存绘图信息、绘图状态
(2)决定绘制的输出目标(绘制到什么地⽅去) (输出目标可以是UIView的layer层、PDF文件、Bitmap或者显示器的窗口)

图形上下文作用.png

CoreGraphics提供了以下几种类型的Graphics Context：
位图图形上下文:
Bitmap Graphics Context
PDF图形上下文:
PDF Graphics Context
window图形上下文:
Window Graphics Context
layer层图形上下文:
Layer Graphics Context
打印图形上下文:
Printer Graphics Context

目标.png

相同的⼀套绘图序列,指定不同的Graphics Context,就可将相同的图像绘制到不同的目标上, 我们在UIView的drawRect:方法中通过UIGraphicsGetCurrentContext()获取的就是Layer Graphics Context所以会绘制在UIView的layer层上

如何通过绘制自定义View

如何利用CoreGraphics绘制东西到View上?
首先,得有图形上下文,因为它能保存绘图信息,并且决定着绘制到什么地方去
其次,那个图形上下⽂必须跟View相关联,才能将内容绘制到View上面

通过绘制自定义View的步骤:

新建⼀个类,继承自UIView
实现-(void)drawRect:(CGRect)rect⽅法.然后在这个方法中 :
(1)取得跟当前view相关联的图形上下文;
(2)绘制相应的图形内容
(3)利用图形上下文将绘制的所有内容渲染显示到view上面

接下来就介绍如何通过绘制自定义View

二. 常用函数介绍

//获取上下文上下文的输出目标就是self.layer
CGContextRef context = UIGraphicsGetCurrentContext();

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

// 设置线宽
CGContextSetLineWidth(context, 13);

// 设置线条终点形状
CGContextSetLineCap(context, kCGLineCapButt);

// 设置连接点的样式连点是圆角
CGContextSetLineJoin(context, kCGLineJoinRound);

//设置起点
CGContextMoveToPoint(context, 100, 100);

// 画一条线到一个点
CGContextAddLineToPoint(context, 130, 200);

// 画矩形参数:(x,y,width,height)
CGContextAddRect(context, CGRectMake(10, 10, 100, 100));

// 画弧形
/**
*x,y 圆心
*radius 半径
*startAngle 画弧的起始位置
*endAngel 画弧的结束位置
* clockwise 0 顺针 1 逆时针
*/
CGContextAddArc(context, 100, 100, 60, - M_PI_4, - 3 * M_PI_4, 1);

// 画圆形
/**
*x,y 圆心
*width 水平宽
*height 垂直高
*/
CGContextAddEllipseInRect(context, CGRectMake(10, 10, 100, 200));

// 画图片
UIImage *image = [UIImage imageNamed:@"papa.png"];
// [image drawAtPoint:CGPointZero];
// [image drawInRect:CGRectMake(10, 10, 50, 50)];
// 平铺
[image drawAsPatternInRect:CGRectMake(0, 0, 180, 180)];

// 画文字
NSString *str = @"哈哈哈哈哈哈啊哈哈哈";
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
//字体大小
dict[NSFontAttributeName] = [UIFont systemFontOfSize:30];
//设置颜色
dict[NSForegroundColorAttributeName] = [UIColor redColor];
//设置描边
dict[NSStrokeColorAttributeName] = [UIColor greenColor];
dict[NSStrokeWidthAttributeName] = @2;
//设置阴影
NSShadow *shaw = [[NSShadow alloc] init];
shaw.shadowColor = [UIColor blueColor];
//设置阴影的偏移量
shaw.shadowOffset = CGSizeMake(1, 1);
shaw.shadowBlurRadius = 2;
dict[NSShadowAttributeName] = shaw;
//画文字
[str drawAtPoint:CGPointZero withAttributes:dict];
//[str drawInRect:rect withAttributes:dict];
//用drawInRect:rect会自动换行.用drawAtPoint不会自动换行.

//设置关闭路径
CGContextClosePath(context);

//来描线,即形状空心
CGContextStrokePath(context);

//来填充实心
CGContextFillPath(context);

关于使用上面的函数绘制几何图形, 绘制图片,文字,进度条,饼形图, 以及复杂的小黄人和自定义气球上升的View以及模仿实现系统的UIImageView的实现代码在:CoreGraphics图形库

关于图形上下文栈和矩阵操作请参考文章:图形上下文栈, 矩阵操作

三. CGMutablePathRef路径的使用

在画线的时候，方法的内部默认创建一个path。它把路径都放到了path里面去。

创建路径
调用CGPathCreateMutable()方法相当于创建了一个路径，这个路径用来保存绘图信息, 它是CGMutablePathRef类型的。
把绘图信息添加到路径里边。
以前的方法是点的位置添加到ctx（图形上下文信息）中，ctx 默认会在内部创建一个path用来保存绘图信息。
在图形上下文中有一块存储空间专门用来存储绘图信息，其实这块空间就是CGMutablePathRef。
把路径添加到上下文中。

代码示例：

以前我们绘制一条直线的代码：

- (void)drawRect:(CGRect)rect {
    //1.获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //2.绘图（画线）
    //设置起点
    CGContextMoveToPoint(ctx, 20, 20);
    //设置终点
    CGContextAddLineToPoint(ctx, 200, 300);
    //渲染
    CGContextStrokePath(ctx);
}

上面的代码和下面的代码是等价的。

- (void)drawRect:(CGRect)rect {
    //1.获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();

    //2.绘图
    //2.1创建一条直线绘图的路径
    //注意：但凡通过Quartz2D中带有creat/copy/retain方法创建出来的值都必须要释放
    CGMutablePathRef path=CGPathCreateMutable();
    //2.2把绘图信息添加到路径里
    CGPathMoveToPoint(path, NULL, 20, 20);
    CGPathAddLineToPoint(path, NULL, 200, 300);
    //2.3把路径添加到上下文中
    //把绘制直线的绘图信息保存到图形上下文中
    CGContextAddPath(ctx, path);

    //3.渲染
    CGContextStrokePath(ctx);

    //4.释放前面创建的两条路径
    //第一种方法
    CGPathRelease(path);
    //第二种方法
    //    CFRelease(path);
}

如果要在上下文中绘制多个图形，这种情况下建议使用path, 这样更清晰. 比如我们想画一个直线和一个圆, 代码如下:

- (void)drawRect:(CGRect)rect
    {
    //1.获取图形上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();

    //2.绘图
    //2.a 画一条直线
    //2.a.1创建一条绘图的路径
    //注意：但凡通过Quartz2D中带有creat/copy/retain方法创建出来的值都必须要释放
    CGMutablePathRef path=CGPathCreateMutable();

    //2.a.2把绘图信息添加到路径里
    CGPathMoveToPoint(path, NULL, 20, 20);
    CGPathAddLineToPoint(path, NULL, 200, 300);

    //2.a.3把路径添加到上下文中
    //把绘制直线的绘图信息保存到图形上下文中
    CGContextAddPath(ctx, path);

    //2.b画一个圆
    //2.b.1创建一条画圆的绘图路径(注意这里是可变的，不是CGPathRef)
    CGMutablePathRef path1=CGPathCreateMutable();

    //2.b.2把圆的绘图信息添加到路径里
    CGPathAddEllipseInRect(path1, NULL, CGRectMake(50, 50, 100, 100));

    //2.b.3把圆的路径添加到图形上下文中
    CGContextAddPath(ctx, path1);

    //3.渲染
    CGContextStrokePath(ctx);

    //4.释放前面创建的两条路径
    //第一种方法
    CGPathRelease(path);
    CGPathRelease(path1);
    //第二种方法
    //CFRelease(path);
}

效果图:

直线和圆.png

如果是画线，那么就创建一条路径（path）用来保存画线的绘图信息，如果又要重新画一个圆，那么就可以创建一条新的路径来专门保存画圆的绘图信息。

注意: 开发过程中，ARC环境, C语言的资源是不会自动释放, 但凡通过quarzt2d中带有creat/copy/retain方法创建出来的值都必须手动的释放
有两种方法可以释放前面创建的路径：
（1）CGPathRelease(path);
（2）CFRelease(path); //CFRelease属于更底层的cocafoundation框架

iOS-CoreGraphics图形库

一. 介绍

二. 常用函数介绍

三. CGMutablePathRef路径的使用

你可能感兴趣的:(iOS-CoreGraphics图形库)