iOS開發UI篇—Quartz2D使用（圖片剪切）

iOS開發UI篇—Quartz2D使用（圖片剪切）

1、使用Quartz2D完成圖片剪切

1.把圖片顯示在自定義的view中

先把圖片繪製到view上。按照原始大小，把圖片繪製到一個點上。

代碼：

1 - (void)drawRect:(CGRect)rect
2 {
3     UIImage *image2=[UIImage imageNamed:@"me"];
4     [image2 drawAtPoint:CGPointMake(100, 100)];
5 }

顯示：

2.剪切圖片讓圖片圓形展現

思路：先畫一個圓，讓圖片顯示在圓的內部，超出的部分不顯示。

      

注意：顯示的範圍只限於指定的剪切範圍，不管往上下文中繪製什麼東西，只要超出了這個範圍的都不會顯示。

代碼：

 1 - (void)drawRect:(CGRect)rect
 2 {
 3     //畫圓，以便之後指定能夠顯示圖片的範圍
 4     //獲取圖形上下文
 5     CGContextRef ctx=UIGraphicsGetCurrentContext();
 6     CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));
 7     
 8     //指定上下文中能夠顯示內容的範圍就是圓的範圍
 9     CGContextClip(ctx);
10     UIImage *image2=[UIImage imageNamed:@"me"];
11     [image2 drawAtPoint:CGPointMake(100, 100)];
12 }

顯示：

 

3.剪切圖片讓圖片三角形展現

代碼：

 1 - (void)drawRect:(CGRect)rect
 2 {
 3 
 4     //畫三角形，以便之後指定能夠顯示圖片的範圍
 5     //獲取圖形上下文
 6     CGContextRef ctx=UIGraphicsGetCurrentContext();
 7 //    CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 50, 50));
 8     CGContextMoveToPoint(ctx, 100, 100);
 9     CGContextAddLineToPoint(ctx, 60, 150);
10      CGContextAddLineToPoint(ctx, 140, 150);
11     CGContextClosePath(ctx);
12     
13     
14     //注意：指定範圍（也就是指定剪切的方法必定要在繪製範圍以前進行調用）
15     //指定上下文中能夠顯示內容的範圍就是圓的範圍
16     CGContextClip(ctx);
17     UIImage *image2=[UIImage imageNamed:@"me"];
18     [image2 drawAtPoint:CGPointMake(100, 100)];
19 }

顯示：