福利來襲之用蒼老師神圖做圖片擦拭小案例
先看效果:
5.gif
圖片擦除思路.
弄兩個不同的圖片.上面一張, 下面一張.
添加手勢,手指在上面移動,擦除圖片.
擦除前要先確定好擦除區(qū)域.
假設(shè)擦除區(qū)域的寬高分別為30.
那點(diǎn)當(dāng)前的擦除范圍應(yīng)該是通過當(dāng)前的手指所在的點(diǎn)來確定擦除的范圍,位置.
那么當(dāng)前擦除區(qū)域的x應(yīng)該是等于當(dāng)前手指的x減去擦除范圍的一半,同樣,y也是當(dāng)前手指的y減去高度的一半.
有了擦除區(qū)域,要讓圖片辦到擦除的效果,首先要把圖片繪制到圖片上下文當(dāng)中, 在圖片上下文當(dāng)中進(jìn)行擦除.
之后再生成一張新的圖片,把新生成的這一張圖片設(shè)置為上部的圖片.那么就可以通過透明的效果,看到下部的圖片了.
第一個參數(shù), 要擦除哪一個上下文
第二人參數(shù),要擦除的區(qū)域.
CGContextClearRect(ctx, rect);
- (void)viewDidLoad {
[super viewDidLoad];
self.imageV.userInteractionEnabled = YES;
添加手勢
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)]; [self.imageV addGestureRecognizer:pan ];}
當(dāng)手指在屏幕上拖動的時候調(diào)用.
- (void)pan:(UIPanGestureRecognizer *)pan{
獲取當(dāng)前的手指點(diǎn).
CGPoint curP = [pan locationInView:self.imageV];
確定擦除區(qū)域.
假設(shè)擦除區(qū)域的寬高分別為30.
那點(diǎn)當(dāng)前的擦除范圍應(yīng)該是通過當(dāng)前的手指所在的點(diǎn)來確定擦除的范圍,位置.
那么當(dāng)前擦除區(qū)域的x應(yīng)該是等于當(dāng)前手指的x減去擦除范圍的一半,同樣,y也是當(dāng)前手指的y減去高度的一半.
CGFloat rectWH = 30; CGFloat x = curP.x - rectWH * 0.5;
CGFloat y = curP.y - rectWH * 0.5;
確實(shí)擦除的位置尺寸.
CGRect rect = CGRectMake(x, y, rectWH, rectWH);
開啟一個位圖上下文.
UIGraphicsBeginImageContextWithOptions(self.imageV.bounds.size, NO, 0);
獲取當(dāng)前的上下文.
CGContextRef ctx = UIGraphicsGetCurrentContext();
把UIImageV上的圖片渲染到上下文當(dāng)中.
[self.imageV.layer renderInContext: ctx];
設(shè)置擦除區(qū)域
CGContextClearRect(ctx, rect);
生成一張新的圖片.
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
關(guān)閉位圖上下文.
UIGraphicsEndImageContext();
給圖片重新賦值
self.imageV.image = newImage;
}
