上一篇博客用 HTML5 + CSS3 实现了一个简单的微信红包照片的效果,那当然少不了街机 iPhone 中的实现。

iOS 实现这个效果常用的有三种方式:

  • CoreImage 绘图

  • CALayer

  • UIVisualEffectView

其实都比较简单,这里介绍一下第一种。首先创建一个 UIImageView 供展示图片。


UIImageView *imgView = [[UIImageView alloc] initWithFrame:self.view.bounds];
[imgView setContentMode:UIViewContentModeScaleAspectFit];
[self.view addSubview:imgView];
    

接下来,准备一张图片,例如:

image

通过 CoreImage 制作模糊效果:


UIImage *img = [UIImage imageNamed:@"img"];
CIImage *inputImg = [CIImage imageWithCGImage:img.CGImage];
CIContext *context = [CIContext contextWithOptions:nil];

CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur" keysAndValues:kCIInputImageKey, inputImg,@"inputRadius", @20, nil];
    
CIImage *blurImg = [filter outputImage];
CGImageRef blurRef = [context createCGImage:blurImg fromRect:CGRectMake(0, 0, img.size.width, img.size.height)];//[blurImg extent]];
    
UIImage *blur = [UIImage imageWithCGImage:blurRef];

得到了模糊图片(UIImage *blur)后,还需要制作一个圆形图片。我们把这两张图拼在一起。


UIGraphicsBeginImageContext(img.size);
[blur drawInRect:CGRectMake(0, 0, img.size.width, img.size.height)];
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddArc(ctx, 160, 280, 50, 50, 0, M_PI);
CGContextClip(ctx);
[img drawInRect:CGRectMake(0, 0, img.size.width, img.size.height)];
UIImage *final = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

最后,展示图片:


imgView.image = final;

看看效果:

image2