iOS中Quartz2d的简单使用

作者: magic_pill | 来源:发表于2017-03-23 18:15 被阅读499次

Quartz2D

一、基本绘制：

画直线

-(void)drawRect:(CGRect)rect {
    //1.获得一个view相关的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //2.描述路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.1.设置起点
    [path moveToPoint:CGPointMake(10, 100)];
    //2.2.设置终点
    [path addLineToPoint:CGPointMake(200, 100)];
    //3.把路径添加到上下文
    CGContextAddPath(context, path.CGPath);
    //4.把上下文的内容显示到view上  fill stroke
    CGContextStrokePath(context);
}

画曲线

-(void)drawRect:(CGRect)rect {
    //1.获得一个view相关的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //2.描述路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.1.设置起点
    [path moveToPoint:CGPointMake(10, 100)];
    //2.2.设置终点，和控制点
    [path addQuadCurveToPoint:CGPointMake(230, 230) controlPoint:CGPointMake(100, 30)];
    //3.把路径添加到上下文
    CGContextAddPath(context, path.CGPath);
    //4.把上下文的内容显示到view上  fill stroke
    CGContextStrokePath(context);
}

画矩形

3.1 画普通矩形：

-(void)drawRect:(CGRect)rect {
    //1.获得一个view相关的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //2.描述路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 200, 200)];
    //3.把路径添加到上下文
    CGContextAddPath(context, path.CGPath);
    //4.把上下文的内容显示到view上  fill stroke
    CGContextStrokePath(context);
}

3.2 画圆角矩形：

-(void)drawRect:(CGRect)rect {
    //1.描述路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 200, 200) cornerRadius:50];
    [[UIColor yellowColor] setFill];

    //2.绘制图形
    [path fill];
}

3.3 指定某一个角为圆角：

-(void)drawRect:(CGRect)rect {
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 200, 200) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(1000, 10)];
    [path stroke];
}

画圆或者椭圆

-(void)drawRect:(CGRect)rect {
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 200, 40)];
    [path stroke];
}

画圆弧

-(void)drawRect:(CGRect)rect {
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(120, 120) radius:40 startAngle:M_PI_4 endAngle:M_PI_4 * 3 clockwise:NO];

    [[UIColor blueColor] set];

    [path stroke];
}

画扇形

6.1. 画扇形1

-(void)drawRect:(CGRect)rect {
    CGPoint point = CGPointMake(125, 125);
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:point radius:100 startAngle:-M_PI_4 endAngle:-M_PI_4 * 3 clockwise:NO];

    [path addLineToPoint:point];
    [path closePath];

    [path stroke];
}

6.2. 画扇形2

-(void)drawRect:(CGRect)rect {
    CGPoint point = CGPointMake(125, 125);
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:point radius:100 startAngle:-M_PI_4 endAngle:-M_PI_4*3 clockwise:NO];

    [path addLineToPoint:point];

    [path fill];
}

画饼图

-(void)drawRect:(CGRect)rect {
    NSArray *angles = @[@30,@30,@40];

    CGFloat endA = 0;
    CGPoint point = CGPointMake(120, 120);

    for (NSNumber *num in angles) {
        CGFloat startA = endA;
        endA = startA + num.intValue / 100.0 * 2 * M_PI;

        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:point radius:80 startAngle:startA endAngle:endA clockwise:YES];
        [path addLineToPoint:point];

        //自定义随机颜色
        [[self drawColor] set];

        [path fill];
    }
}

画文字

-(void)drawRect:(CGRect)rect {
    NSString *str = @"北京大学北京大学北京大学北京大学北京大学";

    CGPoint point = CGPointMake(20, 0);

    NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
    attributes[NSFontAttributeName] = [UIFont systemFontOfSize:50];
    attributes[NSForegroundColorAttributeName] = [UIColor greenColor];

    //边框宽度
    attributes[NSStrokeWidthAttributeName] = @4;

    //必须要设置边框宽度，否则显示不出来阴影
    NSShadow *shadow = [[NSShadow alloc] init];
    shadow.shadowColor = [UIColor blueColor];
    shadow.shadowOffset = CGSizeMake(5, 5);
    shadow.shadowBlurRadius = 2;
    attributes[NSShadowAttributeName] = shadow;

    //不会自动换行
    [str drawAtPoint:point withAttributes:attributes];
    //会自动换行
//    [str drawInRect:rect withAttributes:attributes];
}

绘制图片

-(void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"head-1"];
    //显示原始大小
    [image drawAtPoint:CGPointZero];
    //充满整个屏幕
    //    [image drawInRect:rect];
    //平铺整个屏幕
    //    [image drawAsPatternInRect:rect];
}

状态栈

-(void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 120)];
    [path addLineToPoint:CGPointMake(230, 120)];

    //保存状态
    CGContextSaveGState(context);

    //将路径添加到上下文
    CGContextSetLineWidth(context, 5);
    [[UIColor yellowColor] set];

    CGContextAddPath(context, path.CGPath);

    CGContextStrokePath(context);

    //第二条直线
    path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(100, 10)];
    [path addLineToPoint:CGPointMake(100, 230)];

    CGContextRestoreGState(context);

    CGContextAddPath(context, path.CGPath);
    CGContextStrokePath(context);
}

上下文的矩阵操作

-(void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-100, -50, 200, 100)];

    //平移操作,矩阵操作要在路径添加到上下文之前
    CGContextTranslateCTM(context, 100, 50);
    //缩放
    CGContextScaleCTM(context, 0.8, 0.8);
    //旋转
    CGContextRotateCTM(context, M_PI_4);

    CGContextAddPath(context, path.CGPath);

    CGContextFillPath(context);
}

二、实现系统的UIImageView功能

#import <UIKit/UIKit.h>

@interface YJWImageView : UIView

/** 图片   */
@property(nonatomic,strong) UIImage *img;

-(instancetype)initWithImage:(UIImage *)img;

@end

#import "YJWImageView.h"

@implementation YJWImageView

-(instancetype)initWithImage:(UIImage *)img
{
    if (self == [super init]) {
        self.frame = CGRectMake(0, 0, img.size.width, img.size.height);
        _img = img;
    }
    return self;
}

- (void)drawRect:(CGRect)rect {

    [self.img drawInRect:rect];
}

-(void)setImg:(UIImage *)img
{
    _img = img;

    [self setNeedsDisplay];
}

@end

三、实现定时器雪花功能

#import "YJWSnow.h"

@interface YJWSnow ()   //YJWSnow继承自UIView，指定一个view的class为YJWSnow

/** snowY   */
@property(nonatomic,assign) CGFloat snowY;

@end

@implementation YJWSnow

-(void)awakeFromNib
{
    [super awakeFromNib];
    //添加一个定时器,这个方法不好，因为定时器设置的时间和屏幕刷新的时间不一定相同，可能会出现卡顿的现象
//    [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(update) userInfo:nil repeats:YES];

    //创建CADisplayLink，每次当屏幕刷新时候调用，屏幕每秒刷新60次
    CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
    [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}

-(void)update
{
    _snowY += 1;
    [self setNeedsDisplay];
    if (_snowY >= [UIScreen mainScreen].bounds.size.height) {
        _snowY = 0;
    }
}

- (void)drawRect:(CGRect)rect {
    UIImage *img = [UIImage imageNamed:@"雪花"];
    [img drawAtPoint:CGPointMake(0, _snowY)];
}

@end

四、给图片添加水印

-(void)shuiyinImg
{
    //1.获取图片
    UIImage *image = [UIImage imageNamed:@"阿狸头像"];
    //2.开启图片上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 1);
    //3.把图片绘制给上下文
    [image drawAtPoint:CGPointZero];
    //4.绘制文字
    NSString *str = @"Yijiang";
    [str drawAtPoint:CGPointZero withAttributes:@{
            NSFontAttributeName:[UIFont systemFontOfSize:28],
            NSForegroundColorAttributeName:[UIColor greenColor]
            }];
    //5.生成图片
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    //6.关闭图片上下文
    UIGraphicsEndImageContext();

    self.imgV.image = img;
}

五、生成圆形图片

-(void)clipImg
{
    //1.获取图片
    UIImage *image = [UIImage imageNamed:@"阿狸头像"];
    //2.开启图片上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0.0);
    //3.设置裁剪路径
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    [path addClip];
    //4.把图片绘制到上下文
    [image drawAtPoint:CGPointZero];
    //5.获取图片
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    //6.关闭图片上下文
    UIGraphicsEndImageContext();

    self.imgV.image = img;
}

六、裁剪出带有边框的图片

-(void)borderClip
{
    //1.获取图片
    UIImage *image = [UIImage imageNamed:@"阿狸头像"];
    //2.设置边框大小
    CGFloat border = 10;
    //3.开启图片上下文
    //size 设置为包含边框的大小
    CGSize size = CGSizeMake(image.size.width + 2 * border, image.size.height + 2 * border);
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    //4.描述一个大圆，设为填充
    UIBezierPath *bezier1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    //设置填充颜色
    [[UIColor greenColor] set];
    [bezier1 fill];
    //5.描述一个小圆，设为裁剪路径
    UIBezierPath *bezier2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(border, border, image.size.width, image.size.height)];
    [bezier2 addClip];
    //6.绘制图片
    [image drawInRect:CGRectMake(border, border, image.size.width, image.size.height)];
    //7.获取新图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    self.imageV.image = newImage;
    //8.关闭上下文
    UIGraphicsEndImageContext();
}

七、截屏

-(void)shot
{
    //1.开启图片上下文
    UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);
    //2.获取当前上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //3.UIView之所以能够显示，是因为它内部有一个层，layer层是通过渲染的方式绘制上下文。
    [self.view.layer renderInContext:context];
    //4.获取所截图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    //5.关闭图片上下文
    UIGraphicsEndImageContext();

    self.imageV.image = image;
}

iOS中Quartz2d的简单使用

Quartz2D

一、基本绘制：

二、实现系统的UIImageView功能

三、实现定时器雪花功能

四、给图片添加水印

五、生成圆形图片

六、裁剪出带有边框的图片

七、截屏

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读