iOS中Quartz2d的简单使用

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;
}

最后编辑于：2017.12.06 03:33:40

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,457评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,837评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,696评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,183评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,057评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,105评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,520评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,211评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,482评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,574评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,353评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,213评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,576评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,897评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,174评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,489评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,683评论 2赞 335

iOS中Quartz2d的简单使用

Quartz2D

一、基本绘制：

二、实现系统的UIImageView功能

三、实现定时器雪花功能

四、给图片添加水印

五、生成圆形图片

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

七、截屏

推荐阅读更多精彩内容