前言
Core Graphics是一套基于C的API框架，使用了Quartz作为绘图引擎，作为矢量绘图框架，它功能非常强大，API功能齐全。API功能齐全也就代表着API的数量巨大，写起来代码逻辑很复杂。
在平时开发中，其实UIKit是我们最容易也是最常接触到的框架。绝大多数图形界面都由UIKit完成。但是UIKit依赖于Core Graphics框架，也是基于Core Graphics框架实现的。如果想要完成某些更底层的功能或者追求极致的性能，那么依然推荐使用Core Graphics完成。
Core Graphics和UIKit在实际使用中也存在以下这些差异:
- Core Graphics其实是一套基于C的API框架，使用了Quartz作为绘图引擎。这也就意味着Core Graphics不是面向对象的。
- Core Graphics需要一个图形上下文（Context）。所谓的图形上下文（Context），说白了就是一张画布。这一点非常容易理解，Core Graphics提供了一系列绘图API，自然需要指定在哪里画图。因此很多API都需要一个上下文（Context）参数。
- Core Graphics的图形上下文（Context）是堆栈式的。只能在栈顶的上下文（画布）上画图。
- Core Graphics中有一些API，名称不同却有着相似的功能，新手只需要掌握一种，并能够看懂其他的即可。
在本文中主要是使用Core Graphics实现涂鸦板的功能。
一款实用的涂鸦板
首先看一下具体实现的功能
自定义RGB调整画板背景颜色和画笔颜色，也可以选择相册图片设置为背景图片，可以自定义调整画笔宽度，带有撤销、清除、保存、保存到相册功能 -> Demo
RGB -> 修改画板、画笔颜色
画笔宽度 -> 修改画笔的宽度
撤销 -> 撤销前一步的操作
清除 -> 清除画板内所有内容
保存 -> 保存当前图片
图片 -> 打开手机相册选取图片作为背景
保存相册 -> 把之前保存的图片全部写入手机相册内
-
自定义颜色作为画板背景颜色
颜色背景.png
- 用图片作为画板背景 （不惜祭出本人照片...别影响简友看文的心情就好）
图片背景.png
-
保存后查看图片
查看合成图片.png
主要的实现思路
- 1.创建一个保存所有路径的数组
/** 所有的路径 */
@property (nonatomic, strong) NSMutableArray * paths;
- 2.自定义一个保存每个路径、颜色、宽度的类PathAttribute
@interface PathAttribute : NSObject
/** 画笔颜色 */
@property (nonatomic, strong) UIColor * pathColor;
/** 画笔宽度 */
@property (nonatomic, assign) CGFloat pathWidth;
/** 路径 */
@property (nonatomic, strong) NSMutableArray * path;
@end
- 3.重写touchesBegan:touches withEvent:方法开启路径并保存到路径数组内
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//创建一个路径对象，放到paths里面
PathAttribute *pathAttribute = [[PathAttribute alloc]init];
pathAttribute.pathColor = self.pathColor;
pathAttribute.pathWidth = self.pathWidth;
pathAttribute.path = [NSMutableArray array];
[self.paths addObject:pathAttribute];
}
- 4.重写touchesMoved:touches withEvent:收集手指移动经过的所有点
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
//获取当前路径
PathAttribute *pathAttribute = [self.paths lastObject];
//获取移动到的点
CGPoint movePoint = [[touches anyObject]locationInView:self];
//收集路径上所有的点
[pathAttribute.path addObject:[NSValue valueWithCGPoint:movePoint]];
//苹果要求我们调用UIView类中的setNeedsDisplay方法，则程序会自动调用drawRect方法进行重绘
[self setNeedsDisplay];
}
- 5.最重要的一步，重写drawRect:绘制出所有的内容
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
//获取上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
//创建路径
for (int i = 0; i < self.paths.count; i++) {
PathAttribute *pathAttribute = [self.paths objectAtIndex:i];
CGMutablePathRef path = CGPathCreateMutable();
//绘图
for (int j = 0; j < pathAttribute.path.count; j++) {
CGPoint point = [[pathAttribute.path objectAtIndex:j]CGPointValue] ;
if (j == 0) {
CGPathMoveToPoint(path, &CGAffineTransformIdentity, point.x,point.y);
}else{
CGPathAddLineToPoint(path, &CGAffineTransformIdentity, point.x, point.y);
}
}
//设置path样式
CGContextSetStrokeColorWithColor(currentContext, pathAttribute.pathColor.CGColor);
CGContextSetLineWidth(currentContext, pathAttribute.pathWidth);
//路径添加到currentContext
CGContextAddPath(currentContext, path);
CGContextStrokePath(currentContext);
CGPathRelease(path);
}
}
以上是主要的实现代码，Demo在这里
使用方法
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
//创建画板
if (!self.mainView) {
self.mainView = [[[UINib nibWithNibName:@"MainView" bundle:[NSBundle mainBundle]] instantiateWithOwner:self options:nil] lastObject];
//设置为全屏
self.mainView.frame = CGRectMake(0, 0, kWidth, kHeight);
//代理
self.mainView.delegate = self;
//设置画笔最大宽度
self.mainView.pathMaxWidth = 30;
[self.view addSubview:self.mainView];
}
}
//实现代理方法
#pragma mark - MainViewDelegate
- (void)openPhotoAlbum
{
//打开相册
[self takeFromAlbum];
}
- (void)takeFromAlbum
{
//详细步骤见Demo...
}
参考：
Core Graphics快速入门——从一行代码说起
Core Graphics框架 : 一个让程序猿成为视觉设计师的框架
iOS绘图—— UIBezierPath 和 Core Graphics
网友评论