iOS中Quartz2d的簡(jiǎn)單使用

Quartz2D

一、基本繪制：

  1. 畫直線
-(void)drawRect:(CGRect)rect {
    //1.獲得一個(gè)view相關(guān)的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //2.描述路徑
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.1.設(shè)置起點(diǎn)
    [path moveToPoint:CGPointMake(10, 100)];
    //2.2.設(shè)置終點(diǎn)
    [path addLineToPoint:CGPointMake(200, 100)];
    //3.把路徑添加到上下文
    CGContextAddPath(context, path.CGPath);
    //4.把上下文的內(nèi)容顯示到view上  fill stroke
    CGContextStrokePath(context);
}
  1. 畫曲線
-(void)drawRect:(CGRect)rect {
    //1.獲得一個(gè)view相關(guān)的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //2.描述路徑
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.1.設(shè)置起點(diǎn)
    [path moveToPoint:CGPointMake(10, 100)];
    //2.2.設(shè)置終點(diǎn)，和控制點(diǎn)
    [path addQuadCurveToPoint:CGPointMake(230, 230) controlPoint:CGPointMake(100, 30)];
    //3.把路徑添加到上下文
    CGContextAddPath(context, path.CGPath);
    //4.把上下文的內(nèi)容顯示到view上  fill stroke
    CGContextStrokePath(context);
}
  1. 畫矩形

3.1 畫普通矩形：

-(void)drawRect:(CGRect)rect {
    //1.獲得一個(gè)view相關(guān)的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //2.描述路徑
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 200, 200)];
    //3.把路徑添加到上下文
    CGContextAddPath(context, path.CGPath);
    //4.把上下文的內(nèi)容顯示到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 指定某一個(gè)角為圓角：

-(void)drawRect:(CGRect)rect {
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 200, 200) byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(1000, 10)];
    [path stroke];
}
  1. 畫圓或者橢圓
-(void)drawRect:(CGRect)rect {
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 20, 200, 40)];
    [path stroke];
}
  1. 畫圓弧
-(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];
}
  1. 畫扇形

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];
}
  1. 畫餅圖
-(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];

        //自定義隨機(jī)顏色
        [[self drawColor] set];

        [path fill];
    }
}
  1. 畫文字
-(void)drawRect:(CGRect)rect {
    NSString *str = @"北京大學(xué)北京大學(xué)北京大學(xué)北京大學(xué)北京大學(xué)";

    CGPoint point = CGPointMake(20, 0);

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

    //邊框?qū)挾?    attributes[NSStrokeWidthAttributeName] = @4;

    //必須要設(shè)置邊框?qū)挾?，否則顯示不出來陰影
    NSShadow *shadow = [[NSShadow alloc] init];
    shadow.shadowColor = [UIColor blueColor];
    shadow.shadowOffset = CGSizeMake(5, 5);
    shadow.shadowBlurRadius = 2;
    attributes[NSShadowAttributeName] = shadow;

    //不會(huì)自動(dòng)換行
    [str drawAtPoint:point withAttributes:attributes];
    //會(huì)自動(dòng)換行
//    [str drawInRect:rect withAttributes:attributes];
}
  1. 繪制圖片
-(void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"head-1"];
    //顯示原始大小
    [image drawAtPoint:CGPointZero];
    //充滿整個(gè)屏幕
    //    [image drawInRect:rect];
    //平鋪整個(gè)屏幕
    //    [image drawAsPatternInRect:rect];
}
  1. 狀態(tài)棧
-(void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

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

    //保存狀態(tài)
    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);
}
  1. 上下文的矩陣操作
-(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);
    //旋轉(zhuǎn)
    CGContextRotateCTM(context, M_PI_4);

    CGContextAddPath(context, path.CGPath);

    CGContextFillPath(context);
}

二、實(shí)現(xiàn)系統(tǒng)的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

三、實(shí)現(xiàn)定時(shí)器雪花功能

#import "YJWSnow.h"

@interface YJWSnow ()   //YJWSnow繼承自UIView，指定一個(gè)view的class為YJWSnow

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

@end

@implementation YJWSnow

-(void)awakeFromNib
{
    [super awakeFromNib];
    //添加一個(gè)定時(shí)器,這個(gè)方法不好，因?yàn)槎〞r(shí)器設(shè)置的時(shí)間和屏幕刷新的時(shí)間不一定相同，可能會(huì)出現(xiàn)卡頓的現(xiàn)象
//    [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(update) userInfo:nil repeats:YES];

    //創(chuàng)建CADisplayLink，每次當(dāng)屏幕刷新時(shí)候調(diào)用，屏幕每秒刷新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.關(guān)閉圖片上下文
    UIGraphicsEndImageContext();

    self.imgV.image = img;
}

五、生成圓形圖片

-(void)clipImg
{
    //1.獲取圖片
    UIImage *image = [UIImage imageNamed:@"阿貍頭像"];
    //2.開啟圖片上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0.0);
    //3.設(shè)置裁剪路徑
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    [path addClip];
    //4.把圖片繪制到上下文
    [image drawAtPoint:CGPointZero];
    //5.獲取圖片
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    //6.關(guān)閉圖片上下文
    UIGraphicsEndImageContext();

    self.imgV.image = img;
}

六、裁剪出帶有邊框的圖片

-(void)borderClip
{
    //1.獲取圖片
    UIImage *image = [UIImage imageNamed:@"阿貍頭像"];
    //2.設(shè)置邊框大小
    CGFloat border = 10;
    //3.開啟圖片上下文
    //size 設(shè)置為包含邊框的大小
    CGSize size = CGSizeMake(image.size.width + 2 * border, image.size.height + 2 * border);
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    //4.描述一個(gè)大圓，設(shè)為填充
    UIBezierPath *bezier1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    //設(shè)置填充顏色
    [[UIColor greenColor] set];
    [bezier1 fill];
    //5.描述一個(gè)小圓，設(shè)為裁剪路徑
    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.關(guān)閉上下文
    UIGraphicsEndImageContext();
}

七、截屏

-(void)shot
{
    //1.開啟圖片上下文
    UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);
    //2.獲取當(dāng)前上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //3.UIView之所以能夠顯示，是因?yàn)樗鼉?nèi)部有一個(gè)層，layer層是通過渲染的方式繪制上下文。
    [self.view.layer renderInContext:context];
    //4.獲取所截圖片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    //5.關(guān)閉圖片上下文
    UIGraphicsEndImageContext();

    self.imageV.image = image;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Quartz2D以及drawRect的重繪機(jī)制字?jǐn)?shù)1487 閱讀21 評(píng)論1 喜歡1一、什么是Quartz2D Q...
    PurpleWind閱讀 915評(píng)論 0贊 3
  • 第一步：先科普一下基礎(chǔ)知識(shí)： Core Graphics是基于C的API，可以用于一切繪圖操作 Core Grap...
    真愛要有你才完美閱讀 2,519評(píng)論 0贊 1
  • 前言 本文只要描述了iOS中的Core Animation(核心動(dòng)畫：隱式動(dòng)畫、顯示動(dòng)畫)、貝塞爾曲線、UIVie...
    GitHubPorter閱讀 3,741評(píng)論 7贊 11
  • 母親 是您十月懷胎，把我?guī)?dòng)人間 呀呀學(xué)語(yǔ)時(shí)，您領(lǐng)著我重復(fù)了一遍又一遍 發(fā)燒感冒時(shí)，您把我背在肩上半夜去醫(yī)院 天寒...
    苦笑流年記憶_ea44閱讀 143評(píng)論 0贊 1
  • 在江南的寒風(fēng)中，頂著綢繆的細(xì)雨，漫步於熙攘的街道，感受寒風(fēng)吹襲！ 淺冬已不再是秋末的挽歌，相聚只是短暫的重逢，分別...
    卿鈞瑤閱讀 241評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容