iOS开发系列–打造自己的“美图秀秀”

481 查看

概述

在iOS中可以很容易的开发出绚丽的界面效果，一方面得益于成功系统的设计，另一方面得益于它强大的开发框架。今天我们将围绕iOS中两大图形、图像绘图框架进行介绍：Quartz 2D绘制2D图形和Core Image中强大的滤镜功能。

Quartz 2D

在iOS中常用的绘图框架就是Quartz 2D，Quartz 2D是Core Graphics框架的一部分，是一个强大的二维图像绘制引擎。Quartz 2D在UIKit中也有很好的封装和集成，我们日常开发时所用到的UIKit中的组件都是由Core Graphics进行绘制的。不仅如此，当我们引入UIKit框架时系统会自动引入Core Graphics框架，并且为了方便开发者使用在UIKit内部还对一些常用的绘图API进行了封装。

在iOS中绘图一般分为以下几个步骤：

1.获取绘图上下文

2.创建并设置路径

3.将路径添加到上下文

4.设置上下文状态

5.绘制路径

6.释放路径

图形上下文CGContextRef代表图形输出设备（也就是绘制的位置），包含了绘制图形的一些设备信息，Quartz 2D中的所有对象最终都必须绘制到图形上下文。这样一来，我们在绘制图形时就不必关心具体的设备信息，统一了代码编写方式（在Quartz 2D中的绘图上下文可以是位图Bitmap、PDF、窗口Window、层Layer、打印对象Printer）。

基本图形绘制

在UIKit中默认已经为我们准备好了一个图形上下文对象，在UI控件的drawRect:方法（这个方法在loadView、viewDidLoad方法后执行）中我们可以通过UIKit封装函数UIGraphicsGetCurrentContext()方法获得这个图形上下文(注意在其他UI控件方法中无法取得这个对象)，然后我们只要按照绘图步骤一步步执行即可。下面自定义一个KCView继承自UIView，重写drawRect:方法绘制两条直线说明上面绘图的步骤：

KCView.m

// KCView.m

// Quartz2D

// Created by Kenshin Cui on 14-3-17.

/**

基本绘图

#import "KCView.h"

@implementation KCView

#pragma mark 绘图

//绘图只能在此方法中调用，否则无法得到当前图形上下文

-(void)drawRect:(CGRect)rect{

//1.取得图形上下文对象

CGContextRef context = UIGraphicsGetCurrentContext();

//2.创建路径对象

CGMutablePathRef path = CGPathCreateMutable();

CGPathMoveToPoint(path, nil, 20, 50);//移动到指定位置（设置路径起点）

CGPathAddLineToPoint(path, nil, 20, 100);//绘制直线（从起始位置开始）

CGPathAddLineToPoint(path, nil, 300, 100);//绘制另外一条直线（从上一直线终点开始绘制）

//3.添加路径到图形上下文

CGContextAddPath(context, path);

//4.设置图形上下文状态属性

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

CGContextSetRGBFillColor(context, 0, 1.0, 0, 1);//设置填充色

CGContextSetLineWidth(context, 2.0);//设置线条宽度

CGContextSetLineCap(context, kCGLineCapRound);//设置顶点样式,（20,50）和（300,100）是顶点

CGContextSetLineJoin(context, kCGLineJoinRound);//设置连接点样式，(20,100)是连接点

/*设置线段样式

phase:虚线开始的位置

lengths:虚线长度间隔（例如下面的定义说明第一条线段长度8，然后间隔3重新绘制8点的长度线段，当然这个数组可以定义更多元素）

count:虚线数组元素个数

CGFloat lengths[2] = { 18, 9 };

CGContextSetLineDash(context, 0, lengths, 2);

/*设置阴影

context:图形上下文

offset:偏移量

blur:模糊度

color:阴影颜色

CGColorRef color = [UIColor grayColor].CGColor;//颜色转化，由于Quartz 2D跨平台，所以其中不能使用UIKit中的对象，但是UIkit提供了转化方法

CGContextSetShadowWithColor(context, CGSizeMake(2, 2), 0.8, color);

//5.绘制图像到指定图形上下文

/*CGPathDrawingMode是填充方式,枚举类型

kCGPathFill:只有填充（非零缠绕数填充），不绘制边框

kCGPathEOFill:奇偶规则填充（多条路径交叉时，奇数交叉填充，偶交叉不填充）

kCGPathStroke:只有边框

kCGPathFillStroke：既有边框又有填充

kCGPathEOFillStroke：奇偶填充并绘制边框

CGContextDrawPath(context, kCGPathFillStroke);//最后一个参数是填充类型

//6.释放对象

CGPathRelease(path);

}

@end

在视图控制器创建KCView并添加到根视图中：

- (void)viewDidLoad {

[super viewDidLoad];

KCView *view=[[KCView alloc]initWithFrame:[UIScreen mainScreen].bounds];

view.backgroundColor=[UIColor whiteColor];

[self.view addSubview:view];

}

运行效果如下：

简化绘图方式

上面的绘图方式 Ϧ一方面得益于它强大的开发框架。今天我们将围绕iOS中两大图形、图像绘图框架进行介绍：Quartz 2D绘制2D图形和Core Image中强大的滤镜功能。