今天有朋友给了我一个效果图,问我这种效果怎么做,如图
之前我也没有做过这种效果,不过刚好在今天研究Mantle的时候看到了模糊效果,然后考虑了一下,给他做了个demo。
其实我的思路是这样的,先将一张ImageView的图像模糊,然后再在上面添加一个同样的图片,剪切其中的部分区域,然后就有这种效果了,如图
最后的效果是这样子的
这样就基本上达到了最后想要的效果。
由于一直没时间在github上上传代码,所以之前的全是代码片段,等过段时间不忙了,准备好好研究下github,包括代码上传以及blog,CSDN上上传代码的话估计我就不传了,因为感觉下载的时候很麻烦,所以有时间准备把github配置起来,这样方便。代码如下(伸手党的福利)
CIContext *context = [CIContext contextWithOptions:nil];
CIImage *inputImage = [[CIImage alloc]initWithImage:
[UIImage imageNamed:@"cat.png"]];
// create gaussian blur filter
CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
[filtersetValue:inputImage forKey:kCIInputImageKey];
[filtersetValue:[NSNumber numberWithFloat:10.0]forKey:@"inputRadius"];
// blur image
CIImage *result = [filter valueForKey:kCIOutputImageKey];
CGImageRef cgImage = [context createCGImage:result fromRect:[result extent]];
UIImage *image = [UIImage imageWithCGImage:cgImage];
CGImageRelease(cgImage);
self.catImage.image = image;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.catImage.bounds];
[self.catImageaddSubview:imageView];
UIImage * srcImg = [UIImage imageNamed:@"cat"];
CGFloat width = srcImg.size.width;
CGFloat height = srcImg.size.height;
//开始绘制图片
UIGraphicsBeginImageContext(srcImg.size);
CGContextRef gc =UIGraphicsGetCurrentContext();
绘制Clip区域
CGContextAddEllipseInRect(gc,CGRectMake(150,150,200,120));//椭圆
CGContextClosePath(gc);
CGContextClip(gc);
//坐标系转换
//因为CGContextDrawImage会使用Quartz内的以左下角为(0,0)的坐标系
CGContextTranslateCTM(gc,0, height);
CGContextScaleCTM(gc,1, -1);
CGContextDrawImage(gc,CGRectMake(0,0, width, height), [srcImgCGImage]);
//结束绘画
UIImage *destImg =UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[imageViewsetImage:destImg];
这上面用的是系统的高斯模糊,如果你处理单个或几个图片的话,这代码量比较少,但是多个的话,那就不好用了(或者你可以说你自己封装一下),其实我想说的是有一句话就阔以搞定的(看到这里有没有觉得很兴奋),没错就是 LBBlurredImage ,具体怎么搞定你去看一下就知道了,这里就不重复了。好吧,就说到这里,see you next time !
— HenryCheng