Quartz2D简单的实战举例

一、quartz2D介绍

• 二维绘图引擎，支持iOS与Mac系统。

二、quartz2D使用场景：

功能很多，着重说以下几个：

2.1.基本图形绘制

• 注意：只有在 drawRect: 方法当中才能够获取上下文
• 获取,创建上下文都以UIGraphics开头

/**
 *  方法作用:专门用来绘图
 *  什么时候调用:当View显示的时候调用
 *  @param rect:当View的bounds
 */
- (void)drawRect:(CGRect)rect {
    //1.在drawRect方法当中系统已经帮你创建一个跟View相关联的上下文.(Layer上下文)
    //1.获取上下文
    CGContextRef ctx =  UIGraphicsGetCurrentContext();
    //2.描述路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //画曲线
    //2.1设置起点
    [path moveToPoint:CGPointMake(50, 280)];
    //2.2添加一根曲线到某一个点
    [path addQuadCurveToPoint:CGPointMake(250, 280) controlPoint:CGPointMake(250, 200)];
    //3.把路径添加到上下文
    CGContextAddPath(ctx, path.CGPath);
    //4.把上下文的内容渲染View上
    CGContextStrokePath(ctx);
}

//画直线
- (void)drawLine{
    //1.获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.绘制路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.1 设置起点
    [path moveToPoint:CGPointMake(50, 280)];
    //2.2 添加一根线到终点
    [path addLineToPoint:CGPointMake(250, 50)];
    //addLineToPoint:把上一条线的终点当作是下一条线的起点
    [path addLineToPoint:CGPointMake(200, 280)];
    //上下文的状态
    //设置线的宽度
    CGContextSetLineWidth(ctx, 10);
    //设置线的连接样式
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    //设置线的顶角样式
    CGContextSetLineCap(ctx, kCGLineCapRound);
    //设置颜色
    [[UIColor redColor] set];
    //3.把绘制的内容添加到上下文当中.
    //UIBezierPath:UIKit框架 ；CGPathRef:CoreGraphics框架
    CGContextAddPath(ctx, path.CGPath);
    //4.把上下文的内容显示到View上(渲染到View的layer)
    CGContextStrokePath(ctx);
}

2.2.给图片添加水印

UIImage *image = [UIImage imageNamed:@"阿狸头像"];
//1.开启一个图片原始大小的上下文
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0); //opaque:不透明度
//2.把图片绘制到上下文当中
[image drawAtPoint:CGPointZero];
//3.把文字绘制到上下文当中
NSString *str = @"我爱姗姗";
[str drawAtPoint:CGPointMake(10, 20) withAttributes:nil];
//4.从上下文当中生成一张图片.(把上下文当中绘制的所有内容,生成一张图片)
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//5.关闭上下文.
UIGraphicsEndImageContext();
self.imageV.image = newImage;

2.4.绘制饼图

- (void)drawRect:(CGRect)rect {
    NSArray *dataArray = @[@25,@25,@50];
    CGPoint center =  CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
    CGFloat radius = self.bounds.size.width * 0.5 - 10;
    CGFloat startA = 0;
    CGFloat angle = 0;
    CGFloat endA = 0;
    for (NSNumber *num in dataArray) {
        startA = endA;
        angle = num.intValue / 100.0 * M_PI * 2;
        endA = startA + angle;
        UIBezierPath  *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];
        [[self randomColor] set];
        //添加一根线到圆心
        [path addLineToPoint:center];
        [path fill];
    }
}

2.5.绘制文字

- (void)drawText{
    NSString  *str = @"我爱姗姗";
    NSMutableDictionary *dict = [NSMutableDictionary dictionary];
    //字体大小
    dict[NSFontAttributeName] = [UIFont systemFontOfSize:30];
    //设置颜色
    dict[NSForegroundColorAttributeName] = [UIColor redColor];
    //设置描边
    dict[NSStrokeColorAttributeName] = [UIColor greenColor];
    dict[NSStrokeWidthAttributeName] = @2;
    //设置阴影
    NSShadow *shaw = [[NSShadow alloc] init];
    shaw.shadowColor = [UIColor blueColor];
    //设置阴影的偏移量
    shaw.shadowOffset = CGSizeMake(1, 1);
    shaw.shadowBlurRadius = 2;
    dict[NSShadowAttributeName] = shaw;
    [str drawAtPoint:CGPointZero withAttributes:dict];
    //用drawInRect:rect会自动换行.用drawAtPoint不会自动换行
    //[str drawInRect:rect withAttributes:dict];
}

2.6.剪裁图片

• [image drawAtPoint:CGPointZero]; 绘制的是原始图片的大小
• [image drawInRect:rect]; 把要绘制的图片给填充到给定的区域当中.

- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"001"];
    //裁剪(超过裁剪区域以外的内容,都会被自动裁剪掉)
    //设置裁剪区域一定要在绘制之前进行设置
    UIRectClip(CGRectMake(0, 0, 50, 50));
    //平铺
    [image drawAsPatternInRect:self.bounds];
}

• 如果想要自己设定裁剪区域形状，可参照以下干货。

UIImage *image = [UIImage imageNamed:@"美国队长头像"];
//1.开启跟原始图片一样大小的上下文
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
//2.设置一个圆形裁剪区域
//2.1绘制一个圆形
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
//2.2.把圆形的路径设置成裁剪区域
[path addClip];//超过裁剪区域以外的内容都给裁剪掉
//3.把图片绘制到上下文当中(超过裁剪区域以外的内容都给裁剪掉)
[image drawAtPoint:CGPointZero];
//4.从上下文当中取出图片
UIImage *newImage =  UIGraphicsGetImageFromCurrentImageContext();
//5.关闭上下文
UIGraphicsEndImageContext();
self.imageV.image = newImage;