iOSQuartz2D画图

Quartz2D是一个二维绘图引擎，同时支持iOS和Mac OS X系统（跨平台，纯 C语言的）。

Quartz2D提供了以下几种类型的Graphics Context：

Bitmap Graphics Context
PDF Graphics Context
Window Graphics Context
Layer Graphics Context
Printer Graphics Context

核心步骤：

获得上下文
绘制/拼接绘图路径
将路径添加到上下文
渲染上下文

常见使用

画线（一条线）

 //方法1.

//1.获取图形上下文
//目前我们所用的上下文都是以UIGraphics
//CGContextRef 引用到的类型和函数都是CG开头，是CoreGraphics框架
CGContextRef cts = UIGraphicsGetCurrentContext();
//2.描述路径
//2.1创建路径
CGMutablePathRef path = CGPathCreateMutable();
//2.2设置起点 path:给哪个路径设置起点 第二个参数是否形变
CGPathMoveToPoint(path, NULL,50,50);
//2.3添加一根线到某个点
CGPathAddLineToPoint(path, NULL,200,200);
//3.把路径添加到上下文
CGContextAddPath(cts,path);
//4.渲染上下文
CGContextStrokePath(cts); 

//方法2

//获取上下文
CGContextRef tes = UIGraphicsGetCurrentContext();
//描述路径
//设置起点
CGContextMoveToPoint(tes,50,50);
CGContextAddLineToPoint(tes,200,200);
//渲染
CGContextStrokePath(tes);


//方法三

//贝塞尔路径
//创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
//设置起点
[path moveToPoint:CGPointMake(50,50)];
//添加一根线到某点
[path addLineToPoint:CGPointMake(200,200)];
//绘制路径
[path stroke];

画线（两条）

//方法1
//获取上下文
CGContextRef cos = UIGraphicsGetCurrentContext();
//绘制路径
CGContextMoveToPoint(cos,50,50);

CGContextAddLineToPoint(cos,100,100);
//默认下一根线的起点就是上一个线的终点(当然如果不想连线的话就在写一个起点)
CGContextAddLineToPoint(cos,100,200);


//设置绘图状态,要在渲染之前
//颜色
[[UIColor redColor] setStroke];
//线宽
CGContextSetLineWidth(cos,10);
//设置连接样式
CGContextSetLineJoin(cos, kCGLineJoinRound);
//设置顶角样式
CGContextSetLineCap(cos,kCGLineCapRound);


//渲染上下文
CGContextStrokePath(cos);


//方法2
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20,20)];
[path addLineToPoint:CGPointMake(100,100)];
path.lineWidth = 10;
[[UIColor redColor] set];
[path stroke];

UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:CGPointMake(80,80)];
[path1 addLineToPoint:CGPointMake(60,100)];
path1.lineWidth = 10;
[[UIColor orangeColor] set];

[path1 stroke];


//方法3
//获取上下文
CGContextRef cos = UIGraphicsGetCurrentContext();
//绘制路径
CGContextMoveToPoint(cos, 80,80);

CGContextAddQuadCurveToPoint(cos, 150,20, 260, 50);
//渲染
CGContextStrokePath(cos);

画柱状图

UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 50, 50)];
[path stroke];

画圆

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20,20,100,100) cornerRadius:50];
[path stroke];

画圆弧

//圆弧Center是圆心  ，startAngle参数是弧度  clockwise参数YES是顺时针NO是逆时针
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
[path stroke];

画扇形

CGPoint center = CGPointMake(100, 100);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
//添加一根线到圆心
[path addLineToPoint:center];
//封闭路径，从路径的终点到起点
// [path closePath];
//填充，默认关闭路径
[path fill];

画饼图

- (void)drawRect:(CGRect)rect {

  NSArray *arr = [self arrRandom];
  CGFloat radius = rect.size.width*0.5;
  CGPoint center = CGPointMake(radius,radius);
  CGFloat startA = 0;
  CGFloat angle = 0;
  CGFloat endA = 0;

  for (int i =0;i < arr.count;i ++) {
    startA = endA;
    angle = [arr[i] doubleValue]/100.0*M_PI*2;
    endA = startA+angle;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    [path addLineToPoint:center];
    [[self colorRandom] set];
    [path fill];
  }

  }
  - (NSArray*)arrRandom{

  int totoal = 100;
  NSMutableArray *arr = [NSMutableArray array];
  int temp = 0;
  for (int i=0;i  *)touches withEvent:(UIEvent *)event{

    [self setNeedsDisplay];
  }
  #pragma mark - 笨的方法
  - (void)draw{

    CGFloat radius = self.bounds.size.width*0.5;
    CGPoint center = CGPointMake(radius,radius);

    CGFloat startA = 0;
     CGFloat angle = 0;
    CGFloat endA = 0;

    //第一个扇形
    angle = 25/100.0 * M_PI * 2;
    endA = startA + angle;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    //添加一条线到圆心
    [path addLineToPoint:center];
    //描边和填充通用
    [[UIColor redColor] set];

    [path fill];

    //第二个扇形
    startA = endA;
    angle = 25/100.0 * M_PI * 2;
    endA = startA + angle;
    UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    //添加一条线到圆心
    [path1 addLineToPoint:center];
    //描边和填充通用
    [[UIColor greenColor] set];
    [path1 fill];

    //第三个扇形
    startA = endA;
    angle = 50/100.0 * M_PI * 2;
    endA = startA + angle;
    UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
    //添加一条线到圆心
    [path2 addLineToPoint:center];
    //描边和填充通用
    [[UIColor blueColor] set];
    [path2 fill];
  }

实际开发常用

图片水印效果

UIImage *img = [UIImage imageNamed:@"Default-667h"];
//0.获取上下文（注意UIGraphicsGetCurrentContext()z在drawRectf方法中）
//开启一个位图上下文 参数1：新图片尺寸  2：不透明度YES不透明通常透明 3：缩放上下文取值0不缩放
UIGraphicsBeginImageContextWithOptions(img.size, NO,0);

//1.绘制原生的图片
[img drawAtPoint:CGPointZero];
//2.给原生的图片添加文字
NSString *str = @"Hello";
[str drawAtPoint:CGPointMake(400,1000) withAttributes:@{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:40]}];

//3.生成一张新的图片 从上下文获取图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//4.关闭上下文
UIGraphicsEndImageContext();

self.imgView.image = newImage;

裁剪图片

//图片宽
CGFloat imgWidth = image.size.width;
//图形的宽度和高度
CGFloat ovalWH = imgWidth + 2 * borderWidth;
//1.开启上下文
UIGraphicsBeginImageContextWithOptions(CGSizeMake(ovalWH, ovalWH), NO, 0);
//2.画大图
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0, ovalWH, ovalWH)];
[[UIColor redColor] set];
[path fill];

//3.设置裁剪区域
UIBezierPath *path1 =[UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderWidth,borderWidth, imgWidth,imgWidth)];
[path1 addClip];

//4.绘制图片
[image drawAtPoint:CGPointMake(borderWidth,borderWidth)];
//5.获取图片
UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
//6.关闭上下文
UIGraphicsEndImageContext();
self.imgView.image = newImage;

屏幕截图

//1.获取位图上下文
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size,NO,0);     
//2.开启上下文
CGContextRef ref = UIGraphicsGetCurrentContext();

// 3.把控件上的图层渲染到上下文,layer只能渲染
[self.view.layer renderInContext:ref];

//4.生成一张图片
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

//5.关闭上下文
UIGraphicsEndImageContext();
// compressionQuality： 图片质量 1:最高质量
NSData *data = UIImageJPEGRepresentation(img,1);
 //6.将图片写入
[data writeToFile:[[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,YES)lastObject]stringByAppendingPathComponent:@"shopDetailAddImg"] atomically:YES];
//7.读取
NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)lastObject]stringByAppendingPathComponent:@"shopDetailAddImg"];
[UIImage imageWithContentsOfFile:path];

补充

drawRect方法

绘图只有实现drawRect:方法才能绘图到view上，因为只有里面可以获取view中layer的上下文。

iOSQuartz2D画图

核心步骤：

常见使用

实际开发常用

补充

drawRect方法

你可能感兴趣的:(iOSQuartz2D画图)