iOS_Quartz 2D绘图

4.设置阴影

CGContextRef为设置图形阴影提供了如下两个参数：

（1）-  void CGContextSetShadow(CGContextRef context, CGSize offset,CGFloat blur):该函数设置阴影在X、Y方向上的偏移，并设置阴影的模糊程度。该函数的offset包含两个CGFloat值，第1个CGFloat值控制阴影在X方向的偏移，如果该值为正，则向右偏移，否则向左偏移；第2个CGFloat值控制阴影在Y方向的偏移，如果该值为正，则乡下偏移，否则向上偏移。最后一个blur参数控制阴影的模糊程度，如果参数为1，表明阴影几乎不模糊，blur参数越大，阴影越模糊。

示例： CGContextSetShadow(context, CGSizeMake(-8, -6), 5);

（2）- void CGContextSetShadowWithColor(CGContextRef context, CGSize offset,CGFloat blur, CGColorRef color):该函数与前一个函数的功能基本相似，只是该函数多了一个属性用于设置阴影颜色。

示例： CGContextSetShadowWithColor(context, CGSizeMake(-8, -6), 5, [[UIColor redColor]CGColor]);

#import "DemoView.h" @implementation DemoView - (void)drawRect:(CGRect)rect {  // 获取绘图的上下文  CGContextRef context = UIGraphicsGetCurrentContext();  //3.通过路径的方式创建三角形  [self drawTriangleByPath:context];  //4.绘制文字  [self drawString:context];  //5.绘制图片  [self drawImage]; } -(void)drawImage {  UIImage *image = [UIImage imageNamed:@"6.jpg"];  //将该图片本身绘制到当前绘图CGContextRef的指定区域中。  [image drawInRect:CGRectMake(100, 300, 200, 150)];  //将该图片本身绘制到当前回去CGContextRef的指定点  [image drawAtPoint:CGPointMake(10, 450)]; } -(void)drawString:(CGContextRef)context {  NSString *string = @"hello world";  //设置使用描边模式绘制文字  CGContextSetTextDrawingMode(context, kCGTextStroke);  //将文字本身绘制到当前CGContextRef的指定点  [string drawAtPoint:CGPointMake(100, 250) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName:[UIColor blueColor]}];  //设置使用填充、描边绘制文字  CGContextSetTextDrawingMode(context, kCGTextFillStroke);  //将文本本身绘制到当前CGContextRef的指定区域中  [string drawWithRect:CGRectMake(200, 250, 70, 80) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName:[UIColor blueColor]} context:nil]; } -(void)drawTriangleByPath:(CGContextRef)context {  //创建路径  CGMutablePathRef path = CGPathCreateMutable();  //向路径中添加图形  CGPathMoveToPoint(path, NULL, 20, 200);//创建起点  CGPathAddLineToPoint(path, NULL, 100, 300);  CGPathAddLineToPoint(path, NULL, 60, 400);  //将path添加到上下文  CGContextAddPath(context, path);  //闭合路径  CGContextClosePath(context);  //设置绘图的属性  //设置描边颜色  [[UIColor redColor]setStroke];  //设置填充颜色  [[UIColor greenColor]setFill];  //同时设置填充颜色，又能设置描边颜色 // [[UIColor whiteColor]set];  //使用默认的阴影颜色，阴影向左上角投影，模糊度为5 // CGContextSetShadow(context, CGSizeMake(-8, -6), 5);  CGContextSetShadowWithColor(context, CGSizeMake(-8, -6), 5, [[UIColor redColor]CGColor]);  //绘图  CGContextDrawPath(context, kCGPathFillStroke); } @end 

运行效果图，如下所示：

经过两个案例，细心地朋友可能发现了这样的问题：在案例1中对三角形进行设置了线的类型，设置为点线模式，但是矩形的线的类型没有设置但同样变成了点线模式。在案例2中对三角形设置了阴影模式，但是图片、文字也均带有了阴影。如何解决？

解决办法，分为两步走：

1.对上下文进行操作之前，使用 CGContextSaveGState(CGContextRef c)保存当前上下文状态

2.对上下文进行操作之后，使用 CGContextRestoreGState(CGContextRef c)可以恢复之前保存的上下文状态

四、在内存中绘制位图

前面介绍的都是 通过扩展UIView、重写drawRect:方法进行绘图，这种绘图方式是直接在UIView控件上绘制所有的图形 ——由于每次该控件显示出来时，drawRect:方法都会被调用，这意味着每次该控件显示出来时，程序都需要重绘所有的图形，很明显，这种方式的性能并不好。除此之外，总有些时候需要在内存中绘制图片，这样既可导出到手机本地，也可上传到网络上。

在内存中绘图的步骤如下：

（1）调用UIGraphicsBeginImageContext(CGSize size)函数准备绘图环境。

（2）调用UIGraphiceGetCurrentContext()函数获取绘图CGContextRef

（3）用前面介绍的绘制集合图形、使用路径等方式进行绘图。

（4）调用UIGraphicsGetImageFromCurrentImageContext()函数获取当前绘制的图形，该方法返回一个UIImage对象。

（5）调用UIGraphicsEndImageContext()函数结束绘图，并关闭绘图环境。

#import "ViewController.h" @interface ViewController ()<UIImagePickerControllerDelegate,UINavigationControllerDelegate> @property (weak, nonatomic) IBOutlet UIImageView *imageView; @property(strong,nonatomic)UIImage *image; @property (weak, nonatomic) IBOutlet UITextField *textField; @end @implementation ViewController - (IBAction)drawClicked:(UIButton *)sender {  //开始图形绘制的上下文  UIGraphicsBeginImageContext(self.imageView.frame.size);  //获取图形绘制的上下文  CGContextRef context = UIGraphicsGetCurrentContext();  //绘制矩形  CGContextAddRect(context, CGRectMake(100, 100, 100, 100));  //设置描边、填充颜色  [[UIColor redColor]set];  //绘制图形  CGContextDrawPath(context, kCGPathFillStroke);  //从图形绘制上下文获取图片  self.image = UIGraphicsGetImageFromCurrentImageContext();  //结束图形绘制的上下文  UIGraphicsEndImageContext();  //设置显示图片  [self.imageView setImage:self.image]; } - (IBAction)waterMarkClicked:(UIButton *)sender {  //开始图形绘制的上下文  UIGraphicsBeginImageContext(self.imageView.frame.size);  //先画图片 // self.image = [UIImage imageNamed:@"6.jpg"];  [self.image drawInRect:self.imageView.bounds];  //再画水印  NSString *string = self.textField.text;  [string drawAtPoint:CGPointMake(100, 100) withAttributes:@{NSForegroundColorAttributeName:[UIColor blackColor],NSFontAttributeName:[UIFont systemFontOfSize:25]}];  //从当前上下文获取图片  self.image = UIGraphicsGetImageFromCurrentImageContext();  //结束图形绘制的上下文  UIGraphicsEndImageContext();  //显示带水印的图片  self.imageView.image = self.image; } - (IBAction)saveClicked:(UIButton *)sender {  //保存图片到外部设备  /*   //设置图片保存的路径   NSString *doucuments = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)lastObject];   NSString *fileName = [doucuments stringByAppendingPathComponent:@"watermark.png"];   //获取图片中的data   NSData *imageData = UIImagePNGRepresentation(self.image);   //保存图片   [imageData writeToFile:fileName atomically:YES];   NSLog(@"%@",NSHomeDirectory());   */  //保存图片到相册  UIImageWriteToSavedPhotosAlbum(self.image, nil, nil, nil); } - (IBAction)photoSelect:(UIButton *)sender {  //打开相册  UIImagePickerController *imagePicker = [[UIImagePickerController alloc]init];  //设置图片的来源  imagePicker.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;  //设置代理  imagePicker.delegate = self;  //使用模态窗口的方式显示相册  [self presentViewController:imagePicker animated:YES completion:nil]; } #pragma mark - 实现UIImagePickerControllerDelegate代理方法 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {  NSLog(@"%@",info);  //通过字典方式获取图片  self.image = [info objectForKey:UIImagePickerControllerOriginalImage];  [self.imageView setImage:self.image];  //关闭模态窗口  [picker dismissViewControllerAnimated:YES completion:nil]; } - (void)viewDidLoad {  [super viewDidLoad]; } @end 

运行效果图，如下图：

五、添加渐变效果

前面介绍的都是使用一种颜色来填充区域，除此之外，Quartz 2D还允许使用颜色渐变、位图来填充指定区域。

Quartz 2D为我们提供了两种渐变填充的函数，分别是： 线性渐变填充、圆形径向渐变填充。

- void CGContextDrawRadialGradient(CGContextRef context,GradientRef gradient, CGPoint startCenter, CGFloat startRadius,CGPoint endCenter, CGFloat endRadius, CGGradientDrawingOptions options)，参数详解如下：

/* 参数2：gradient参数代表渐变对象，

参数3：startCenter参数设置起始圆的圆心，

参数4：startRadius设置起始圆的半径，

参数5：endCenter参数代表结束圆的圆心

参数6：endRadius代表结束圆的半径

参数7：options可支持kCGGradientDrawsBeforeStartLocation(可扩展填充起点之前的区域)或kCGGradientDrawsAfterEndLocation(扩展填充结束点之后的区域)*/

- void CGContextDrawLinearGradient(CGContextRef context,CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint,CGGradientDrawingOptions options)：

/* 参数2：gradient参数代表渐变对象，

参数3：startPoint开始点坐标

参数4：endPoint结束点坐标

参数5： options可支持kCGGradientDrawsBeforeStartLocation(可扩展填充起点之前的区域)或kCGGradientDrawsAfterEndLocation(扩展填充结束点之后的区域)*/

废话不多说，直接上代码分析：

#import "DemoView.h" @implementation DemoView - (void)drawRect:(CGRect)rect {  // 画渐变：线性渐变、径向渐变  //获取绘图的上下文  CGContextRef context = UIGraphicsGetCurrentContext();  //画线性渐变 // [self drawLinarGradient:context];  [self drawRadialGradient:context]; } -(void)drawRadialGradient:(CGContextRef)context {  //2.创建渐变  //2.1创建颜色空间  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();  //2.2设置开始颜色、结束时颜色  UIColor *startColor =[UIColor yellowColor];  const CGFloat *startColorCompents = CGColorGetComponents([startColor CGColor]);  UIColor *endColor = [UIColor blackColor];  const CGFloat *endColorCompents = CGColorGetComponents([endColor CGColor]);  CGFloat components[8] = {startColorCompents[0],startColorCompents[1],   startColorCompents[2],   startColorCompents[3],   endColorCompents[0],   endColorCompents[1],   endColorCompents[2],   endColorCompents[3]};  CGFloat locations[2] = {0.0,1.0};  CGGradientRef gradien = CGGradientCreateWithColorComponents(colorSpace, components, locations, 2);  /*   参数详解；   参数1:用于指定该渐变所使用的颜色空间（如：RGB，CMYK,Gray等颜色空间）；   参数2：用于指定根据不同的颜色空间设置多种颜色   参数3：locations参数指定各颜色点得分布位置（如果将该参数指定为NULL，各颜色点将会均匀分布）   参数4：count参数指定该渐变包含多少种颜色   */  //3.绘画渐变效果(径向渐变)  CGContextDrawRadialGradient(context, gradien, CGPointMake(200, 200), 50, CGPointMake(200, 200), 100, kCGGradientDrawsBeforeStartLocation|kCGGradientDrawsAfterEndLocation);  /*   参数2：gradient参数代表渐变对象，   参数3：startCenter参数设置起始圆的圆心，   参数4：startRadius设置起始圆的半径，   参数5：endCenter参数代表结束圆的圆心   参数6：endRadius代表结束圆的半径   参数7：options可支持kCGGradientDrawsBeforeStartLocation(可扩展填充起点之前的区域)或kCGGradientDrawsAfterEndLocation(扩展填充结束点之后的区域)   */  //4.清理工作  CGColorSpaceRelease(colorSpace);  CGGradientRelease(gradien); } -(void)drawLinarGradient:(CGContextRef)context {  //2.创建渐变  //2.1创建颜色空间  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();  //2.2设置开始颜色、结束时颜色  UIColor *startColor =[UIColor redColor];  const CGFloat *startColorCompents = CGColorGetComponents([startColor CGColor]);  UIColor *endColor = [UIColor blueColor];  const CGFloat *endColorCompents = CGColorGetComponents([endColor CGColor]);  CGFloat components[8] = {startColorCompents[0],startColorCompents[1],   startColorCompents[2],   startColorCompents[3],   endColorCompents[0],   endColorCompents[1],   endColorCompents[2],   endColorCompents[3]};  CGFloat locations[2] = {0.0,1.0};  CGGradientRef gradien = CGGradientCreateWithColorComponents(colorSpace, components,NULL, 2);  //3.绘画渐变效果(线性)  CGContextDrawLinearGradient(context, gradien, CGPointMake(100, 100), CGPointMake(200, 100),kCGGradientDrawsAfterEndLocation | kCGGradientDrawsBeforeStartLocation);  /*   options可支持kCGGradientDrawsBeforeStartLocation(可扩展填充起点之前的区域)或kCGGradientDrawsAfterEndLocation(扩展填充结束点之后的区域)  */  //4.清理工作  CGColorSpaceRelease(colorSpace);  CGGradientRelease(gradien); } @end 

运行效果图，如下所示:

六、PDF文档

1.绘制、读取PDF文档

PDF文档存储依赖于分辨率的向量图形、文本和位图，并用于程序的一系列指令中。一个PDF文档可以包含多页的图形和文本。PDF可用于创建跨平台、只读的文档，也可用于绘制依赖于分辨率的图形。Quartz为所有应用程序创建高保真的PDF文档，这些文档保留应用的绘制操作，如图下图所示。PDF文档的结果将通过系统的其它部分或第三方法的产品来有针对性地进行优化。Quartz创建的PDF文档在Preview和Acrobat中都能正确的显示。

案例1：创建pdf文档（创建并读取）

#import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIWebView *webView; @end @implementation ViewController - (IBAction)showPDF:(id)sender {  //设置pdf文件的路径  NSString *documentPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject];  NSLog(@"%@",documentPath);  NSString *pdfFileName = [documentPath stringByAppendingPathComponent:@"face.pdf"];  //创建URL  NSURL *url = [NSURL URLWithString:pdfFileName];  //创建request  NSURLRequest *request = [NSURLRequest requestWithURL:url];  //在webView中显示  [self.webView loadRequest:request]; } - (void)viewDidLoad {  [super viewDidLoad];  //  [self createImagePDF]; } -(void)createImagePDF {  //设置pdf文件的路径  NSString *documentPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject];  NSLog(@"%@",documentPath);  NSString *pdfFileName = [documentPath stringByAppendingPathComponent:@"face.pdf"];  //开始pdf的绘图上下文  UIGraphicsBeginPDFContextToFile(pdfFileName, CGRectMake(0, 0, 320, 480), nil);  for(int i = 0; i < 9; i++)  {   //开始pdf新的一页   UIGraphicsBeginPDFPage();   //画图像   UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.png",i]];   [image drawAtPoint:CGPointMake(320/2, 480/2)];  }  //结束pdf的绘图上下文  UIGraphicsEndPDFContext(); } //创建pdf -(void)createPDF {  //设置pdf文件的路径  NSString *documentPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject];  NSLog(@"%@",documentPath);  NSString *pdfFileName = [documentPath stringByAppendingPathComponent:@"test.pdf"];  //开始pdf的绘图上下文  UIGraphicsBeginPDFContextToFile(pdfFileName, CGRectMake(0, 0, 320, 480), nil);  //获取当前的绘图上下文  CGContextRef context  = UIGraphicsGetCurrentContext();  //开始pdf新的一页  UIGraphicsBeginPDFPage();  //画圆形  CGContextAddEllipseInRect(context, CGRectMake(100, 100, 100, 100));  //设置描边、填充颜色  [[UIColor redColor]set];  //将图形绘制到上下文中  CGContextDrawPath(context, kCGPathFillStroke);  //画字符串  NSString *str = @"this is  a test page.";  [str drawAtPoint:CGPointMake(200, 200) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName:[UIColor blueColor]}];  //结束pdf的绘图上下文  UIGraphicsEndPDFContext(); } @end 

运行效果图，如下图所示:

以上案例中共实现三个功能：

(1)将图片绘制到pdf文档中去，

(2)将自定义的图形绘制到pdf文档中

(3)通过UIWebView控件进行显示pdf文档内容（这种方式只只用于图形类的内容，如果是电子书文本类的内容，则此方式不可实现）。

2.使用Quartz 2D的方式读取PDF文档内容

#import "PDFView.h" @interface PDFView()<UIActionSheetDelegate,UIAlertViewDelegate> {  CGPDFDocumentRef _pdfDoc;  size_t _pageNo;//当前页码  size_t _totalPage;//总的页数 } @end @implementation PDFView - (void)drawRect:(CGRect)rect {  NSLog(@"重绘");  CGContextRef context = UIGraphicsGetCurrentContext();  //旋转坐标系  CGContextTranslateCTM(context, 80, self.frame.size.height-60);  CGContextScaleCTM(context, 1, -1);  //画页面  [self drawPDFPage:_pageNo context:context]; } //打开pdf文档 -(void)openPDF:(NSURL *)url {  CFURLRef urlRef = (__bridge CFURLRef)url;  _pdfDoc = CGPDFDocumentCreateWithURL(urlRef);  _totalPage = CGPDFDocumentGetNumberOfPages(_pdfDoc);  _pageNo = 1; } //显示pdf页面 -(void)drawPDFPage:(size_t)pageNo context:(CGContextRef)context {  CGPDFPageRef pdfPage = CGPDFDocumentGetPage(_pdfDoc, pageNo);  CGContextDrawPDFPage(context, pdfPage); } - (IBAction)prePage:(id)sender {  if(_pageNo > 1)  {   _pageNo--;   [self setNeedsDisplay];  }   } - (IBAction)nextPage:(id)sender {  if(_pageNo < _totalPage)  {   _pageNo++;   [self setNeedsDisplay];  } } @end 

运行效果图，如下所示：