23.Quartz2D总结-优快云博客

本文链接：https://blog.youkuaiyun.com/shn19891109/article/details/52218442

一.Quartz2D简介

Quartz2D是二维的绘图引擎(经包装的函数库，方便开发者使用。也就是说苹果帮我们封装了一套绘图的函数库),用Quartz2D写的同一份代码，既可以运行在iphone上又可以运行在mac上，可以跨平台开发,开发中比较常用的是截屏/裁剪/自定义UI控件,Quartz2D在iOS开发中的价值就是自定义UI控件.

二.绘图简介

1.绘图的步骤： 
    1.获取上下文 
        CG:表示这个类在CoreGraphics框架里  Ref:引用,目前学的上下文都跟UIGraphics有关，想获取图形上下文，首先敲UIGraphics。

    2.创建路径（描述路径） 
        一般开发中用贝塞尔路径，里面封装了很多东西，可以帮我画一些基本的线段，矩形，圆等等
    4.渲染上下文
        首先获取图形上下文，然后描述路径，把路径添加到上下文，渲染到视图，图形上下文相当于一个内存缓存区，在内存里面操作是最快的，比直接在界面操作快多了

3.当这个View要显示的时候才会调用drawRect绘制图形,viewDidLoad后才会调用，因为那时候还没显示视图

4.注意：drawRect不能手动调用，因为图形上下文我们自己创建不了，只能由系统帮我们创建，并且传递给我们.需要我们手动调用 [self setNeedsDisplay](重绘，系统会先创建与view相关联的上下文，然后再调用drawRect)

三.Quartz2D绘图演练

1.绘制直线

最原始的绘图方式

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

绘直线第二种方式

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

绘直线第三种方式

// UIKit已经封装了一些绘图的功能
// 贝瑟尔路径
// 创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
// 设置起点
[path moveToPoint:CGPointMake(50, 50)];
// 添加一根线到某个点
[path addLineToPoint:CGPointMake(200, 200)];
// 绘制路径
[path stroke];

2.绘制曲线

最原始的绘图方式

// 原生绘制方法
// 获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 描述路径
// 设置起点
CGContextMoveToPoint(ctx, 50, 50);
// cpx:控制点的x
CGContextAddQuadCurveToPoint(ctx, 150, 20, 250, 50);
// 渲染上下文
CGContextStrokePath(ctx);

3.绘制图形

圆弧

// Center：圆心
// startAngle:弧度
// clockwise:YES:顺时针 NO：逆时针

// 扇形
CGPoint center = CGPointMake(125, 125);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:100 startAngle:0 endAngle:M_PI_2 clockwise:YES];    
// 添加一根线到圆心
[path addLineToPoint:center];
// 封闭路径，关闭路径：从路径的终点到起点
[path closePath];
[path stroke];
// 填充：必须是一个完整的封闭路径,默认就会自动关闭路径
//    [path fill];

饼状图

//随机绘制饼状图
- (NSArray *)arrRandom
{
    int totoal = 100;
    NSMutableArray *arrM = [NSMutableArray array];
    int temp = 0;
    for (int i = 0; i < arc4random_uniform(10) + 1; i++) {
        temp = arc4random_uniform(totoal) + 1;
// 100 1~100
// 随机出来的临时值等于总值，直接退出循环，因为已经把总数分配完毕，没必要在分配。
        [arrM addObject:@(temp)];
        // 解决方式：当随机出来的数等于总数直接退出循环。
        if (temp == totoal) {
            break;
        }
        totoal -= temp;
     }
//如果余下的值不为0的情况
    if (totoal) {
        [arrM addObject:@(totoal)];
    }
    return arrM;
}

- (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] integerValue] / 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];
    }
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //重新绘制
    [self setNeedsDisplay];
}
- (UIColor *)colorRandom
{
    // 0 ~ 255 / 255
    // OC:0 ~ 1
    CGFloat r = arc4random_uniform(256) / 255.0;
    CGFloat g = arc4random_uniform(256) / 255.0;
    CGFloat b = arc4random_uniform(256) / 255.0;
    return [UIColor colorWithRed:r green:g blue:b alpha:1];
}

柱状图

- (void)drawRect:(CGRect)rect {

    NSArray *arr = [self arrRandom];

    CGFloat x = 0;
    CGFloat y = 0;
    CGFloat w = 0;
    CGFloat h = 0;

    for (int i = 0 ; i < arr.count; i++) {

        w = rect.size.width / (2*arr.count - 1);
        x = 2 * w * i;
        h = [arr[i] floatValue] / 100.0 *rect.size.height;
        y = rect.size.height - h;
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(x, y, w, h)];
        [[self colorRandom] set];
        [path fill];
    }
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    [self setNeedsDisplay];
}

- (NSArray *)arrRandom {

    int total = 100;

    NSMutableArray *arrM = [NSMutableArray array];

    int temp = 0;

    for (int i = 0 ; i < arc4random_uniform(10) + 1; i++) {

        temp = arc4random_uniform(total) + 1;

        [arrM addObject:@(temp)];

        if (temp == total) {

            break;
        }
        total -= temp;
    }

    if (total) {

        [arrM addObject:@(total)];
    }

    return arrM;
}
- (UIColor *)colorRandom
{
    // 0 ~ 255 / 255
    // OC:0 ~ 1
    CGFloat r = arc4random_uniform(256) / 255.0;
    CGFloat g = arc4random_uniform(256) / 255.0;
    CGFloat b = arc4random_uniform(256) / 255.0;
    return [UIColor colorWithRed:r green:g blue:b alpha:1];

}

绘制文字

// 绘制文字
NSString *str = @"asfdsfsdf";
// 文字的起点
// Attributes：文本属性
NSMutableDictionary *textDict = [NSMutableDictionary dictionary];
// 设置文字颜色
textDict[NSForegroundColorAttributeName] = [UIColor redColor];

// 设置文字字体
textDict[NSFontAttributeName] = [UIFont systemFontOfSize:30];
// 设置文字的空心颜色和宽度
textDict[NSStrokeWidthAttributeName] = @3;
textDict[NSStrokeColorAttributeName] = [UIColor yellowColor];

// 创建阴影对象
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor greenColor];
shadow.shadowOffset = CGSizeMake(4, 4);
shadow.shadowBlurRadius = 3;
textDict[NSShadowAttributeName] = shadow;

// 富文本:给普通的文字添加颜色，字体大小
[str drawAtPoint:CGPointZero withAttributes:textDict]; //不会换行

绘制图片

// 超出裁剪区域的内容全部裁剪掉
// 注意：裁剪必须放在绘制之前
UIRectClip(CGRectMake(0, 0, 50, 50));//裁剪图片

UIImage *image = [UIImage imageNamed:@"001"];
// 默认绘制的内容尺寸跟图片尺寸一样大
[image drawAtPoint:CGPointZero];
//绘制图片在一定区域内
//[image drawInRect:rect];
// 绘图(平铺图片)
//[image drawAsPatternInRect:rect];

4.绘图中的定时器

如果在绘图的时候需要用到定时器，通常使用CADisplayLink

//CADisplayLink:每次屏幕刷新的时候就会调用，屏幕一般一秒刷新60次
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeChange)];
// 添加主运行循环
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

- (void)timeChange
{
//注意:这个方法并不会马上调用drawRect,其实这个方法只是给当前控件添加刷新的标记，等下一次屏幕刷新的时候才会调用drawRect
    [self setNeedsDisplay];
}

5.矩阵操作(平移,缩放,旋转)

- (void)drawRect:(CGRect)rect {
// 1.获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.描述路径
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-100, -50, 200, 100)];
[[UIColor redColor] set];
// 上下文矩阵操作
// 注意:矩阵操作必须要在添加路径之前
//  平移
CGContextTranslateCTM(ctx, 100, 50);
// 缩放
CGContextScaleCTM(ctx, 0.5, 0.5);
// 旋转
CGContextRotateCTM(ctx, M_PI_4);
// 3.把路径添加上下文
CGContextAddPath(ctx, path.CGPath);
[[UIColor redColor] set];
// 4.渲染上下文
CGContextFillPath(ctx);
}

四.Quartz2D应用

1.图片水印

// 加载图片
UIImage *image = [UIImage imageNamed:@"小黄人"];
// 0.获取上下文，之前的上下文都是在view的drawRect方法中获取（跟View相关联的上下文layer上下文）
// 目前我们需要绘制图片到新的图片上，因此需要用到位图上下文
// 怎么获取位图上下文,注意位图上下文的获取方式跟layer上下文不一样。位图上下文需要我们手动创建。
// 开启一个位图上下文，注意位图上下文跟view无关联，所以不需要在drawRect.
// size:位图上下文的尺寸（新图片的尺寸）
// opaque: 不透明度 YES：不透明 NO:透明，通常我们一般都弄透明的上下文
// scale:通常不需要缩放上下文，取值为0，表示不缩放
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
UIBezierPath *path =[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 300, 300)];

[[UIColor redColor] set];
[path stroke];

// 1.绘制原生的图片
[image drawAtPoint:CGPointZero];
// 2.给原生的图片添加文字
NSString *str = @"小码哥";

// 创建字典属性
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor redColor];
dict[NSFontAttributeName] = [UIFont systemFontOfSize:20];
[str drawAtPoint:CGPointMake(200, 528) withAttributes:dict];

// 3.生成一张图片给我们,从上下文中获取图片
UIImage *imageWater = UIGraphicsGetImageFromCurrentImageContext();
// 4.关闭上下文
// UIGraphicsEndImageContext();

self.imageView.image = imageWater;

2.图片裁剪

+ (UIImage *)imageWithClipImage:(UIImage *)image borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)color
{
    // 图片的宽度和高度
    CGFloat imageWH = image.size.width;

    // 设置圆环的宽度
    CGFloat border = borderWidth;

    // 圆形的宽度和高度
    CGFloat ovalWH = imageWH + 2 * border;

    // 1.开启上下文
UIGraphicsBeginImageContextWithOptions(CGSizeMake(ovalWH, ovalWH), NO, 0);
    // 2.画大圆
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, ovalWH, ovalWH)];
    [color set];
    [path fill];
    // 3.设置裁剪区域
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(border, border, imageWH, imageWH)];
    [clipPath addClip];
    // 4.绘制图片
    [image drawAtPoint:CGPointMake(border, border)];
    // 5.获取图片
    UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
    // 6.关闭上下文
    UIGraphicsEndImageContext();
    return clipImage;
}

3.图片截取

//根据手指移动截取任意大小的图片
//1.记录开始节点
//2.添加指定区域截取图片
//3.裁剪图片

// 给控制器的view添加一个pan手势
//记录开始节点
@property (nonatomic, assign) CGPoint startP;
@property (weak, nonatomic) UIImageView *imageV;
@property (nonatomic, weak) UIView *clipView; //设置裁剪显示的View

- (UIView *)clipView{
    if (_clipView == nil) {
        UIView *view = [[UIView alloc] init];
        _clipView = view;

        view.backgroundColor = [UIColor blackColor];
        view.alpha = 0.5;

        [self.view addSubview:view];
    }

    return _clipView;
}


UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];

[self.view addGestureRecognizer:pan];


//裁剪
- (void)pan:(UIPanGestureRecognizer *)pan
{
    CGPoint endA = CGPointZero;
    if (pan.state == UIGestureRecognizerStateBegan) { // 一开始拖动的时候

        // 获取一开始触摸点
      _startP = [pan locationInView:self.view];

    }else if(pan.state == UIGestureRecognizerStateChanged){ // 一直拖动
        // 获取结束点
         endA = [pan locationInView:self.view];

        CGFloat w = endA.x - _startP.x;
        CGFloat h = endA.y - _startP.y;

        // 获取截取范围
        CGRect clipRect = CGRectMake(_startP.x, _startP.y, w, h);

        // 生成截屏的view
        self.clipView.frame = clipRect;
    }
    else if (pan.state == UIGestureRecognizerStateEnded){

        // 图片裁剪，生成一张新的图片

        // 开启上下文
        // 如果不透明，默认超出裁剪区域会变成黑色，通常都是透明
        UIGraphicsBeginImageContextWithOptions(_imageV.bounds.size, NO, 0);

        // 设置裁剪区域
       UIBezierPath *path =  [UIBezierPath bezierPathWithRect:_clipView.frame];

        [path addClip];
        // 获取上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // 把控件上的内容渲染到上下文
        [_imageV.layer renderInContext:ctx];

        // 生成一张新的图片
        _imageV.image = UIGraphicsGetImageFromCurrentImageContext();

        // 关闭上下文
        UIGraphicsEndImageContext();

        // 先移除
        [_clipView removeFromSuperview];
        // 截取的view设置为nil
        _clipView = nil;   
    }
}

4.屏幕截屏

//1.开启位图上下文
 UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, 0);
//2.获取上下文
 CGContextRef ctx = UIGraphicsGetCurrentContext();
//3.把控件上的图层渲染到上下文,layer只能渲染
[view.layer renderInContext:ctx];
//4.生成一张图片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
//5.关闭上下文
UIGraphicsEndImageContext();

5.图片擦除

//在拖动手势中做图片擦除
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];    
[self.view addGestureRecognizer:pan];


- (void)pan:(UIPanGestureRecognizer *)pan
{
    //1.获取当前点
    CGPoint curP = [pan locationInView:self.view];
    //2.获取擦除的矩形范围
    CGFloat wh = 100;
    CGFloat x = curP.x - wh * 0.5;
    CGFloat y = curP.y - wh * 0.5;
    CGRect rect = CGRectMake(x, y, wh, wh);
    //3.开启上下文
    UIGraphicsBeginImageContextWithOptions(self.view     .bounds.size, NO, 0);
    //4.获取上下文
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    //5.把控件的layer渲染上去
    [_imageView.layer renderInContext:ctx];
    //6.擦除图片
    CGContextClearRect(ctx, rect);
    //7.生成一张图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    _imageView.image = image;
    //8.关闭上下文
    UIGraphicsEndImageContext();

}