前言

附上绘图demo--https://github.com/yangfangxue/YFX_Quartz-2D

什么是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]; }

得到的效果图如下:

  

iOS-绘图(Quartz2D)的简单使用(原创)的更多相关文章

  1. 【iOS】Quartz2D绘图路径Path

    一.绘图路径 A.简单说明 在画线的时候,方法的内部默认创建一个path.它把路径都放到了path里面去. 1.创建路径  cgmutablepathref 调用该方法相当于创建了一个路径,这个路径用 ...

  2. IOS 绘制圆饼图 简单实现的代码有注释

    今天为大家带来IOS 绘图中圆饼的实现 .h文件 #import <UIKit/UIKit.h> @interface ZXCircle : UIView @end .m文件 #impor ...

  3. 论文第4章:iOS绘图平台的实现

    面向移动设备的矢量绘图平台设计与实现 Design and Implementation of Mobile Device-oriented Vector Drawing Platform 引用本论文 ...

  4. iOS绘图教程 (转,拷贝以记录)

    本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,在翻译过程中我加入了一些书中没有涉及到的内容.希望本文能够对你有所帮助. 转自:http://www ...

  5. iOS绘图教程

    本文是<Programming iOS5>中Drawing一章的翻译,考虑到主题完整性,翻译版本中加入了一些书中未涉及到的内容.希望本文能够对你有所帮助.(本文由海水的味道翻译整理,转载请 ...

  6. iOS绘图框架CoreGraphics分析

    由于CoreGraphics框架有太多的API,对于初次接触或者对该框架不是十分了解的人,在绘图时,对API的选择会感到有些迷茫,甚至会觉得iOS的图形绘制有些繁琐.因此,本文主要介绍一下iOS的绘图 ...

  7. iOS学习——Quartz2D学习之UIKit绘制

    iOS学习——Quartz2D学习之UIKit绘制 1.总述 在IOS中绘图技术主要包括:UIKit.Quartz 2D.Core Animation和OpenGL ES.其中Core Animati ...

  8. iOS CoreImage之滤镜简单使用

    代码地址如下:http://www.demodashi.com/demo/11605.html 老骥伏枥,志在千里 前记 最近一直在研究图像处理方面,既上一篇iOS Quart2D绘图之UIImage ...

  9. iOS绘图系统UIKit与Core Graphics

    概述 iOS主要的绘图系统有UIKit,Core Graphics,Core Animation,Core Image,Open GL等,本片博文主要介绍UIKit与Core Graphics的绘图系 ...

随机推荐

  1. 超好玩!10款神奇的字符图案 & 词汇云生成工具

    在这里,我们推荐10款惊人的字符图案生成工具.词云可以定义为词频的图形表示,而字符图案发生器是一个把数据,如文字和标签在以视觉和吸引人的方式展示的简单的工具.这些生成工具具有不同的功能,其中包括不同的 ...

  2. [前端]npm安装慢,换用淘宝的镜像

    镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 通过config命令 npm config set registry https://registry ...

  3. VS问题汇总——竹子整理

    VS这个宇宙第一IDE有时候也会淘气一把,此贴记录下日后遇到的VS本身的问题 1.VS显示正忙!!!其他项目能打开,就这个不行,关闭vs进程重启vs还是无法解决. 这个问题从VS2010开始就遇到过, ...

  4. JavaScript 中变量、作用域和内存问题的学习

    这是我学习JavaScript的第二篇文章,之前做过几年的Java开发,发现JavaScript虽然也是面向对象的语言但是确实有很多不同之处.就本篇博客,主要学习总结一下最近学习到的JavaScrip ...

  5. Discuz!X3解读之类引入机制及目录结构

    实例: - /source/class/table/table_forum_faq.php - /source/class/model/model_forum_post.php - /source/p ...

  6. 小白学Linux(五)--VI/VIM编辑器

    我们操作文件,终究离不开编辑文件,对文件内容的编辑,Linux系统下,我们通常使用VI/VIM来编辑文件.VI是每个Linux都会自带的文本编辑器,VIM是VI的增强版,可能有些发行版本没有自带,可以 ...

  7. 树状数组---Squared Permutation

    BNUOJ   51636 最近,无聊的过河船同学在玩一种奇怪的名为“小Q的恶作剧”的纸牌游戏. 现在过河船同学手有张牌,分别写着,打乱顺序之后排成一行,位置从左往右按照标号. 接下来小Q同学会给出个 ...

  8. javascript 之正则匹配HTML

    正则表达式 <(\S*?) [^>]*>.*?</\1>|<.*? /> 匹配 <html>hello</html>|<a> ...

  9. JavaScript基础16——js的BOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. JS 节流

    作为前端的小白,在做项目的过程中,一般只考虑到实现功能,并没有考虑到性能的问题. 比如说,下拉加载更多的这个功能和resize()是特别耗费性能的.此时就要想到节流了. 节流:就是然一个函数无法在短时 ...