当用户触摸屏幕时,删除模糊对图像的影响

时间:2014-09-09 12:54:24

标签: ios objective-c image touch gpuimage

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

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

由于

1 个答案:

答案 0 :(得分:3)

界面构建器

  1. 首先将2 UIImageView放在彼此之上。将其模式设置为Aspect Fit。在您要模糊的UIImageView上,还要检查User Interaction Enabled

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

      enter image description here enter image description here

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


    2. .h文件

      1. 在你的.h中通过ctrl声明要模糊的UIImageView,然后点击将其拖动到.h文件。您的.h文件应如下所示:

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

      2. .m文件

        1. 在您的.m文件@synthesize uivBlurred中,声明以下两种方法:

          - (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];


              1. 如果一切顺利,你的.m文件看起来应该是这样的
              2. #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
                

                现在添加您的图片,然后运行该应用。你应该有这样的东西:

                enter image description here

                当您点击图片时:

                enter image description here

                您还可以使用上面的代码here

                下载示例项目