iOS-绘图(Quartz2D)的简单使用(原创)

转载自：http://www.cnblogs.com/start-ios/p/5293564.html

前言

什么是Quartz2D？

Quartz 2D是一个二维图形绘制引擎，支持ios环境和Mac OS X环境。我们可以使用Quartz 2D API来实现许多功能如基本 路径的绘制、透明度、描影、绘制阴影、透明层、颜色管理、反锯齿、PDF文档生成和PDF元数据访问。在需要的时候，Quartz 2D 还可以借助图形硬件的功能。在Mac OS X中，Quartz 2D可以与其它图形图像技术混合使用，如Core Image、Core Video、 OpenGL、QuickTime。例如，通过使用 QuickTime的GraphicsImportCreateCGImage函数，可以用 Quartz从一个  QuickTime图形导入器中创建一个图像。

绘图

(1)CGContextRef 上下文 ---> 画板

(2) 画图的内容 ----> 设置画图的内容

(3) 把内容添加到上下文 ( 画板 )

(4) 把内容画到画板上

基础知识

常用方法介绍

(1)CGContextRef 上下文 ---> 画板

(2) 路径

《 1 》 UIBezierPath

《 2 》 CGMutablePathRef 通过点绘制一个路径

《 3 》 CGContextMoveToPoint 注意必须设置起始点

(3) 画形状

《 1 》矩形   CGContextAddRect

《 2 》曲线   CGContextAddCurveToPoint

《 3 》圆形   CGContextAddEllipseInRect

《 3.1 》 CGContextSetLineWidth 设置笔画宽度

《 3.2 》 set 设置笔画的颜色

《 3.3 》 setFill 划线区域范围的填充

《 3.4 》 setStroke 设置笔画的颜色

《 3.5 》设置画笔填充样式

1.kCGPathFill 只填充

2.kCGPathStroke 画笔颜色

3.kCGPathFillStroke 既填充又有画笔颜色

(4) 截图

《 1 》 UIGraphicsBeginImageContextWithOptions 开始截图

《 2 》 UIGraphicsGetImageFromCurrentImageContext() 获得当前图片上下文的图片-- 画图视图的 layer 上得到

《 3 》 UIGraphicsEndImageContext 关闭图片上下文

《 4 》 UIGraphicsBeginImageContext 开始获得图片上下文、

《 5 》 CGContextStrokePath 把路径绘制到图片上下文

《 6 》直接把路径绘制到界面 stroke

画线

（ 1 ） CGContextRef 上下文 -> 画板

（ 2 ）路径 画图的内容

（ 3 ） CGContextAddPath 把路径添加到上下文

（ 4 ） CGContextStrokePath 把路径渲染到上下文

1.首先新建一个类 继承与UIView 我在这里给它命名为PaintingView

//所有画图的代码都写在drawRect里面 

//1.在初始化这个类的对象的时候会调用 2.setNeedsDisplay

//以下我会写几种画直线 矩形 圆形 曲线以及画线简化 还有截屏保存到相册的方法 只需在drawRect用self调用一下即可

- (void)drawRect:(CGRect)rect {    [super drawRect:rect];        }

画直线

//画直线- (void)addLine{    //1.创建 画布 上下文    //获得当前上下文 当做画布    CGContextRef context =    UIGraphicsGetCurrentContext();    //2.创建画图的内容    UIBezierPath *path = [UIBezierPath bezierPath];    //point 中心点    //x 中心点x    //y 中心点y    //y不变 x从小值 - 大值 横向直线    //2.1    [path moveToPoint:CGPointMake(100, 50)];    //2.2添加其他点    [path addLineToPoint:CGPointMake(100, 350)];    [path addLineToPoint:CGPointMake(300, 50)];    //2.3设置画笔的宽度    path.lineWidth = 2;    //2.4设置画笔颜色//    [[UIColor whiteColor]set];    [[UIColor whiteColor]setStroke];//画笔颜色为白色    [[UIColor brownColor]setFill];//设置填充颜色    //3.把画的内容<路径>添加到上下文<画布>    CGContextAddPath(context, path.CGPath);    //4.绘制 渲染 内容到上下文《画布》//    CGContextStrokePath(context);    //设置填充的样式    CGContextDrawPath(context, kCGPathFillStroke);        }

画矩形

//添加矩形- (void)addRect{        //1.画布    CGContextRef context =    UIGraphicsGetCurrentContext();    //2.内容    CGContextAddRect(context, CGRectMake(0, 0, 100, 100));//    [[UIColor redColor]set];    [[UIColor whiteColor]setStroke];    [[UIColor brownColor]setFill];    //设置画笔宽度    CGContextSetLineWidth(context, 3);    //3.渲染    //直接渲染矩形//    CGContextStrokeRect(context, CGRectMake(0, 0, 100, 100));    CGContextDrawPath(context, kCGPathFillStroke);}

画圆形

//画圆形- (void)addRound{        //1.画布    contextRef =    UIGraphicsGetCurrentContext();    //2.内容    CGContextAddEllipseInRect(contextRef, CGRectMake(10, 10, 100, 100));    [[UIColor whiteColor]set];    //3.渲染到画布    CGContextDrawPath(contextRef, kCGPathFillStroke);        }

画曲线

//画曲线- (void)addCurve{    //1.画布    CGContextRef context =    UIGraphicsGetCurrentContext();    //2.内容    UIBezierPath *path = [UIBezierPath bezierPath];    [path moveToPoint:CGPointMake(100, 100)];//    [path addCurveToPoint:CGPointMake(200, 150) controlPoint1:CGPointMake(300, 50) controlPoint2:CGPointMake(100, 100)];    /*     Center:中心点     radius:半径     startAngle:开始的弧度     endAngle:结束的弧度     clockwise:是顺时针 还是逆时针     */    [path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];    [[UIColor redColor]setStroke];    [[UIColor yellowColor]setFill];    //3.把内容添加到画布上    CGContextAddPath(context, path.CGPath);    //4.渲染    CGContextDrawPath(context, kCGPathFillStroke);}

画线简化

//画线简化-(void)addLine2{    //1.路径    //2.画出内容        UIBezierPath *path  = [UIBezierPath bezierPath];    [path moveToPoint:CGPointMake(200, 200)];    [path addLineToPoint:CGPointMake(200, 500)];    [[UIColor whiteColor]set];    [path stroke];}

截屏--->需要注意的一点是这个方法首先不会在这个类中被自己所调用 是先有图才能截图的 所以我们需要把这个方法放到PaintingView.h中去声明一下 然ViewController中创建PaintingView的对象 用对象去调用这个方法即可. 

//截屏- (void)cutScreen{        //1.获得一个图片的上下文(画布)    //2.画布的上下文    //3.设置截图的参数    //3.5 截图    //4.关闭图片的上下文    //5.保存            UIGraphicsBeginImageContext(self.frame.size);        [self addRound];        [self.layer renderInContext:contextRef];            /*     size 图片尺寸     opaque 透明度  YES-->不透明  NO--->透明     scale 比例     */            UIGraphicsBeginImageContextWithOptions(self.frame.size, YES, 1);    //开始截图     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();        //关闭截图上下文    UIGraphicsEndImageContext();        UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);}- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{        }

回到ViewController中创建Painting这个类的对象 调用截屏的方法

- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.        PaintingView *view = [[PaintingView alloc]initWithFrame:self.view.frame];    [self.view addSubview:view];        [view cutScreen];            }

得到的效果图如下: