• 昨天寫了一篇文章quartz2D 的從零到一學(xué)習(xí)使用（附贈源碼）,是關(guān)于quartz2D比較基礎(chǔ)用法的總結(jié)拌倍，今天講講進(jìn)階的知識

1.將方形圖片繪制成圓形圖片
2.給圖片加水印
3.將圖片裁剪成圓形
4.將圖片裁剪成帶有邊框的圓形
5.屏幕截屏

一.將方形圖片繪制成圓形圖片

在實(shí)際開發(fā)過程中柱恤，我們常常使用到將圖片的變成圓形梗顺，我們想講講如何用quartz2D繪制一個圓形的圖片

原始圖片

通過以下代碼繪制成圓形的圖片

- (void)drawRect:(CGRect)rect {
   //1.獲取圖形上下文
   CGContextRef ctx = UIGraphicsGetCurrentContext();
   //2.畫個圓
   CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 70, 70));
   //3.剪切
   CGContextClip(ctx);
   //4.將圖片繪制上去
   UIImage *image = [UIImage imageNamed:@"5.jpg"];
   [image drawAtPoint:CGPointMake(0, 0)];
   
   //5.渲染
   CGContextFillPath(ctx);
}

繪制的圓形圖片

1.使用圖形上下文吮播，一定是要先獲取
2.我們打算繪制一個圓形的，所以粟关，先繪制一個圓形誊役，在去使用CGContextClip剪切，以后繪制的任何東西迫悠，不論在任何位置创泄，只有處在圓心的位置才會顯示鞠抑。

使用三角形裁剪圖片

隨意畫一個三角形搁拙，然后繪制圖片

- (void)drawRect:(CGRect)rect {
    //1.獲取圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2.畫個三角形
    CGContextMoveToPoint(ctx, 0, 10);
    CGContextAddLineToPoint(ctx, 250, 67);
    CGContextAddLineToPoint(ctx, 256, 190);
    CGContextClosePath(ctx);
    //3.剪切
    CGContextClip(ctx);
    //4.將圖片繪制上去
    UIImage *image = [UIImage imageNamed:@"5.jpg"];
    [image drawAtPoint:CGPointMake(0, 0)];
    
    //繪制一個正方形
    [[UIColor redColor] set];
//    CGContextAddRect(ctx, CGRectMake(10, 10, 203, 240));
    
    //5.渲染
    CGContextFillPath(ctx);
}

• 想在里面繪制一個紅色的矩形酪碘，于是打開注釋代碼CGContextAddRect(ctx, CGRectMake(10, 10, 203, 240)),得到了這個圖片

在繪制一個矩形

1.也就是說兴垦，只要你調(diào)用CGContextClip裁剪方法探越，那么將來所有的繪制钦幔，都只能在裁剪的范圍只能繪制
2.如果我們想不受裁剪的影響节槐，想在三角形旁邊繪制一個rect铜异，就要用到圖形上下文棧的知識了

出戰(zhàn)在redColor之后

出戰(zhàn)在redColor之前

- (void)drawRect:(CGRect)rect {
    //1.獲取圖形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //1.1保存空白的上下文
    CGContextSaveGState(ctx);
    //2.畫個三角形
    CGContextMoveToPoint(ctx, 0, 10);
    CGContextAddLineToPoint(ctx, 250, 67);
    CGContextAddLineToPoint(ctx, 256, 190);
    CGContextClosePath(ctx);
    
    //3.剪切
    CGContextClip(ctx);
    //4.將圖片繪制上去
    UIImage *image = [UIImage imageNamed:@"5.jpg"];
    [image drawAtPoint:CGPointMake(0, 0)];
    //繪制一個正方形
    
    //還原上下文
    CGContextRestoreGState(ctx);
    [[UIColor redColor] set];
    CGContextAddRect(ctx, CGRectMake(10, 10, 20, 230));
    
    //5.渲染
    CGContextFillPath(ctx);
}

總結(jié)：
1.想去剪切圖片，而且不形象別的繪制圖片蚂子，就是用上下文
2.使用繪制圖片,我們只是在上下文中顯示了食茎，但是要知道我們沒有獲得一張三角形或者圓形的照片别渔！

二.給圖片加水印

1.過去我們做demo使用的是圖層上下文哎媚，實(shí)際上就是將東西繪制到CALayer上拨与，用UIVIew來顯示,但是獲取不到具體的圖片买喧。
2.位圖上下文岗喉，我們將東西繪制，然后獲取一張圖片荚斯，不再是一個UIVIew了
2.5 繪制到東西到不同上下文，獲取的結(jié)果是不一樣的
3.使用圖層上下文查牌，繪制的時候通過UIGraphicsGetCurrentContext在drawRect方法中獲取已經(jīng)生成好的圖形上下文事期。
4.使用位圖上下文可以在viewdidLoad中直接寫，使用begin纸颜，end方法去開啟和關(guān)閉位圖上下文

想將兩張圖片合成一下兽泣，制作出一個水印效果的UIImage圖片，保存到本地

水印logo

背景圖片

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //0.獲取舊的圖片
    UIImage *oldImage = [UIImage imageNamed:@"5.jpg"];
    
    //1.開啟位圖上下文(這句話的意思就是生產(chǎn)了一個這么大的圖片胁孙！)
     //    UIGraphicsBeginImageContext(oldImage.size);
    /**
     *  有兩種開啟位圖上下文的方法，推薦第二種
     *  size 生成圖片的大小涮较，和oldIamge一樣大
     * opaque 不透明稠鼻，YES是不透明，NO是透明
     * scale    拉伸比例狂票，推薦不拉伸 0.0
     */
    UIGraphicsBeginImageContextWithOptions(oldImage.size, NO, 0.0);
    
    //2.繪制背景圖片
    [oldImage drawAtPoint:CGPointZero];
    
    //3.繪制logo圖片
    UIImage *logoImg = [UIImage imageNamed:@"fgg.png"];
    CGFloat margin = 10;
    CGFloat logoX = oldImage.size.width - margin - logoImg.size.width;
    CGFloat lognY = oldImage.size.height - margin - logoImg.size.height;
    //繪制的位置
    [logoImg drawAtPoint:CGPointMake(logoX,lognY)];
    
    //4.獲得新的照片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //5.關(guān)閉位圖上下文
    UIGraphicsEndImageContext();
    
    //6.測試候齿，我們將圖片放到IamgeView上看看對不對
    self.bgImageView.image = newImage;
    
}

合成之后的圖片

1. 開啟位圖上下文 UIGraphicsBeginImageContextWithOptions

2.調(diào)用UIGraphicsBeginImageContextWithOptions方法就是創(chuàng)建了一個圖片，如果是水印闺属，就是bgView的尺寸慌盯，也可以自定義size
3.繪制logo的時候，可以設(shè)置一個比例掂器，或者具體的位置亚皂，這個看實(shí)際開發(fā)的要求
4.使用UIGraphicsGetImageFromCurrentImageContext方法獲取位圖上下文制作的圖片（如果是打水印，就是獲取合成后的圖片）
5.關(guān)閉上下文UIGraphicsEndImageContext
6.UIGraphicsGetImageFromCurrentImageContext一定要在關(guān)閉之前執(zhí)行国瓮，如果關(guān)閉了孕讳，就獲取不到了
7.在實(shí)際的開發(fā)過程中匠楚，我們將打印后的圖片保存到沙河目錄中巍膘，然后上傳到自己的服務(wù)器中

    //接著上邊的代碼寫的 

    //7厂财，將圖片保存到本地沙河目錄中
    NSData *data = UIImagePNGRepresentation(newImage);
    //UIImageJPEGRepresentation 中第二個參數(shù)，代表壓縮的質(zhì)量峡懈，0-1之間璃饱，推薦1，但是這個方法出來的圖片不如UIImagePNGRepresentation的好肪康，所以推薦使用上邊的
//    NSData *data1 = UIImageJPEGRepresentation(newImage, 1);
    
    //8.保存到沙河目錄中
    NSString *path = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"newIage.png"];
    [data writeToFile:path atomically:YES];

   //這樣就可以保存圖片到本地了荚恶，親測可用，可以制作一個分類磷支，方便管理使用

三.剪切方形圖片成圓形

UIGraphicsBeginImageContextWithOptions中設(shè)置**不透明**屬性為 YES谒撼，底部就是黑色的，建議設(shè)置成NO

設(shè)置成NO雾狈，周邊都是透明的非常好

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //裁剪一個圓形的圖片（最后會有兩張圖片廓潜，一張是原來方形的，一張是圓形的善榛，過去的講解的是辩蛋，如何繪制到UIVIew，但是并沒有生成新的圖片）
    
    //獲取過去的方形的圖片
    UIImage * oldIamge = [UIImage imageNamed:@"5.jpg"];
    //1.開啟圖形上下文
    
    //自定義一個高度也可以移盆，不一定非要用照片的高度悼院！
    CGFloat imgHeight = 100;
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(imgHeight, imgHeight), NO, 0.0);
    
    //2.繪制一個圓形的圖片，然后裁剪
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //繪制一個圓形
    CGContextAddArc(ctx, imgHeight*0.5, imgHeight*0.5, imgHeight*0.5, 0, M_PI * 2, NO);
    //剪切上下文咒循，只能在圈子里繪制東西
    CGContextClip(ctx);
    
    //3.將image繪制到圓圈中
    [oldIamge drawInRect:CGRectMake(0, 0, imgHeight, imgHeight)];
    
    //4.獲取新的照片
    UIImage *newImg = UIGraphicsGetImageFromCurrentImageContext();
    
    //5.結(jié)束位圖上下文
    UIGraphicsEndImageContext();
    
    //顯示一下据途，保存到桌面中
    self.bgImageView.image = newImg;
    
    //保存
    NSData *data = UIImagePNGRepresentation(newImg);
    [data writeToFile:@"/Users/wangxin/Desktop/wangxin2.png" atomically:YES];
}

裁剪圖片步驟
1.開啟位圖上下文，并設(shè)置大小叙甸，可以使照片的大小颖医，也可以自己設(shè)置。我給了一個100dx
2.獲取圖形上下文蚁署，繪制圓形供我們?nèi)ΧɡL圖的范圍
3.圈定好為繪圖的范圍便脊，我們來CGContextClip裁剪
4.將圖片繪制到指定的圓中
5.獲取當(dāng)前位圖上下文所繪制的image
6.關(guān)閉上下文

四.將圖片裁剪成帶有邊框的圓形

帶有邊框的圖片

繪制帶有邊框的圓形圖片如何制作？
1.假設(shè)原圖是100dx * 100dx,邊框?yàn)?0dx
2.先繪制一個大圓光戈，紅色哪痰，寬高是1000.5+10，填充久妆，繪制
3.繪制一個小圓晌杰，用于將來切割，小圓的圓心和大圓相同筷弦，但是半徑是原圖高的一般肋演，也就是100dx0.5
4.圈定繪制范圍
5.將原圖繪制到小圓上（x = border,y=border）
6.獲取新的圖片
7.關(guān)閉上下文
8.使用圖片即可

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //1.加載一張圖片
    UIImage * oldIamge = [UIImage imageNamed:@"5.jpg"];
    
    //2.開啟圖像上下文
    CGFloat border = 10;
    CGFloat imageW = oldIamge.size.width + 2*border;
    CGFloat imageH = oldIamge.size.height + 2*border;
    CGSize imageSize = CGSizeMake(imageW, imageH);
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
    
    //3.取得當(dāng)前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    //4.繪制邊框（大圓）
    [[UIColor redColor] set];
    CGContextAddArc(ctx, imageW*0.5, imageH*0.5, imageW*0.5, 0, M_PI*2, NO);
    CGContextFillPath(ctx);
    
    //5.繪制小圓（oldimage那么大就行）
    [[UIColor blueColor] set];
    CGContextAddArc(ctx, imageW*0.5, imageW*0.5, oldIamge.size.width*0.5, 0, M_PI*2, NO);
    //裁剪
    CGContextClip(ctx);
    
    //6.將圖片繪制到小圓上
    [oldIamge drawInRect:CGRectMake(border, border, oldIamge.size.width, oldIamge.size.width)];
    
    //7.獲取當(dāng)前上下文合成的圖片
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //8.結(jié)束位圖上下文
    UIGraphicsEndImageContext(ctx);

    //9.顯示和存儲本地
    self.bgImageView.image = newImage;
    NSData *data = UIImagePNGRepresentation(newImage);
    [data writeToFile:@"/Users/wangxin/Desktop/name1.jpg" atomically:YES];
}

五.剪切屏幕

用xib描述view是這樣?jì)饍旱?/div>

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //截屏
    
    //1.開啟上下文
    UIGraphicsBeginImageContextWithOptions(self.view.frame.size, NO, 0.0);
    
    //2.將控制器view的layer渲染到上下文
    [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
    
    //3.取出照片
    UIImage *newIamge = UIGraphicsGetImageFromCurrentImageContext();
    
    //4.保存到本地
    NSData *data = UIImagePNGRepresentation(newIamge);
    [data writeToFile:@"/Users/wangxin/Desktop/name13.jpg" atomically:YES];
    
    //5.關(guān)閉上下文
    UIGraphicsEndImageContext();
}

截屏效果

1.self.view就是截取的屏幕抑诸，我們可以隨意的獲取某個控件，通過layer截屏
2.所有的UI控件的本質(zhì)爹殊，都是將東西繪制到CALayer蜕乡，UIView就是一個容器，接受手勢的梗夸，看到的東西都是CALayer

截取的seg

寫在后邊
0.本文的所有功可以合并成分類层玲，方便使用，高度自定義反症，非常好用
1.這些對圖片的常用操作很使用辛块，所以我們可以給UIImage寫一個分類，將來拿來就用.代碼在進(jìn)階教程demo
2.推薦一個非常著名的第三方庫CorePlot铅碍。繪制餅狀圖润绵，柱狀圖，和K線圖都非常方便胞谈。