当用户触摸屏幕时，删除图像上的模糊效果[关闭]

Question

我想消除用户在屏幕上触摸的特定位置的模糊。当用户在屏幕上移动手指时，只有当前触摸部分会有清晰的图像。其余所有屏幕都会有模糊图像。当用户将手指从屏幕上移开时，完整的图像将再次模糊。

到目前为止我所做的是：添加了一个 GPUImage 框架来制作图像模糊。在该图像的顶部，我有一张原始图像。那是最初隐藏。我想要的是当用户点击屏幕然后仅使用特定圆圈显示该选定部分的原始图像时。

谢谢

Answer 1

界面构建器

1. 首先将 2 个UIImageView 放在一起。将它们的模式都设置为Aspect Fit。在您想要模糊的UIImageView 上，同时检查User Interaction Enabled。

---

1. 确保将您想要模糊的UIImageView 的最近邻约束的间距设置为-10，并将您不想模糊的UIImageView 的最近邻约束的间距设置为0。

   我们这样做是因为稍后我们应用了 10 的 GaussianBlurFilter。通过应用此过滤器，我们在要模糊的图像的每个方向上添加了 10 个额外的像素，使图像的高度和宽度增加了 20 个像素。还要确保在您的超级视图中检查Clip Subviews，以防止模糊图像超出其超级视图的范围。

---

.h 文件

1. 在您的 .h 中声明您想要模糊的 UIImageView，方法是通过 ctrl+单击将其拖到 .h 文件中。您的 .h 文件应如下所示：

   #import <UIKit/UIKit.h>
   
   @interface ViewController : UIViewController
   @property (weak, nonatomic) IBOutlet UIImageView *uivBlurred;
   @end
   

---

.m 文件

1. 在你的.m文件@synthesizeuivBlurred中，声明以下2个方法：

   - (void)blurImageInImageView: (UIImageView*)imageView
   {
       CIFilter *gaussianBlurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
       [gaussianBlurFilter setDefaults];
       [gaussianBlurFilter setValue:[CIImage imageWithCGImage:[imageView.image CGImage]] forKey:kCIInputImageKey];
       [gaussianBlurFilter setValue:@10 forKey:kCIInputRadiusKey];
   
       CIImage *outputImage = [gaussianBlurFilter outputImage];
       CIContext *context = [CIContext contextWithOptions:nil];
       CGRect rect = [outputImage extent];
   
       CGImageRef cgimg = [context createCGImage:outputImage fromRect:rect];
       UIImage *blurredImage = [UIImage imageWithCGImage:cgimg];
       [imageView setImage:blurredImage];
       CGImageRelease(cgimg);
   }
   

   和

   -(void)cutHoleInImageView:(UIImageView*)imageView atPoint:(CGPoint)point withRadius: (float)radius
   {
       CGRect imageViewFrame = imageView.bounds;
       CGRect circleFrame = CGRectMake(point.x-radius/2,point.y-radius/2,radius,radius);
       CAShapeLayer* shapeLayer = [CAShapeLayer layer];
       CGMutablePathRef path = CGPathCreateMutable();
       CGPathAddEllipseInRect(path, nil, circleFrame);
       CGPathAddRect(path, nil, imageViewFrame);
       shapeLayer.path = path;
       CGPathRelease(path);
       shapeLayer.fillRule = kCAFillRuleEvenOdd;
       imageView.layer.mask = shapeLayer;
   }
   

---

1. 还在你的 .m 文件中实现以下 3 个方法：

   -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
   {
       UITouch *touch = [[event allTouches] anyObject];
       if(touch.view == uivBlurred)
       {
           [self cutHoleInImageView:uivBlurred atPoint:[touch  locationInView:uivBlurred] withRadius:180];
       }
   }
   
   -(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
   {
       UITouch *touch = [[event allTouches] anyObject];
       if(touch.view == uivBlurred)
       {
            [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:180];
       }
   }
   
   -(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
   {
       UITouch *touch = [[event allTouches] anyObject];
       if(touch.view == uivBlurred)
       {
            [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:0];
       }
   }
   

---

1. 将以下行添加到您的 viewDidLoad

   [self blurImageInImageView:uivBlurred];

---

4. 如果一切顺利，您的 .m 文件应该如下所示

#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController
@synthesize uivBlurred;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self blurImageInImageView:uivBlurred];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)blurImageInImageView: (UIImageView*)imageView
{
    CIFilter *gaussianBlurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [gaussianBlurFilter setDefaults];
    [gaussianBlurFilter setValue:[CIImage imageWithCGImage:[imageView.image CGImage]] forKey:kCIInputImageKey];
    [gaussianBlurFilter setValue:@10 forKey:kCIInputRadiusKey];

    CIImage *outputImage = [gaussianBlurFilter outputImage];
    CIContext *context = [CIContext contextWithOptions:nil];
    CGRect rect = [outputImage extent];

    CGImageRef cgimg = [context createCGImage:outputImage fromRect:rect];
    UIImage *blurredImage = [UIImage imageWithCGImage:cgimg];
    [imageView setImage:blurredImage];
    CGImageRelease(cgimg);
}

-(void)cutHoleInImageView:(UIImageView*)imageView atPoint:(CGPoint)point withRadius: (float)radius
{
    CGRect imageViewFrame = imageView.bounds;
    CGRect circleFrame = CGRectMake(point.x-radius/2,point.y-radius/2,radius,radius);
    CAShapeLayer* shapeLayer = [CAShapeLayer layer];
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, nil, circleFrame);
    CGPathAddRect(path, nil, imageViewFrame);
    shapeLayer.path = path;
    CGPathRelease(path);
    shapeLayer.fillRule = kCAFillRuleEvenOdd;
    imageView.layer.mask = shapeLayer;
}

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [[event allTouches] anyObject];
    if(touch.view == uivBlurred)
    {
        [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:180];
    }
}

-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [[event allTouches] anyObject];
    if(touch.view == uivBlurred)
    {
         [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:180];
    }
}

-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [[event allTouches] anyObject];
    if(touch.view == uivBlurred)
    {
         [self cutHoleInImageView:uivBlurred atPoint:[touch locationInView:uivBlurred] withRadius:0];
    }
}

@end

现在添加您的图像，然后运行应用程序。你应该有这样的东西：

当你点击图片时：

您也可以下载上面代码here的示例项目