当用户触摸屏幕时，消除图像上的模糊效果 [英] Remove blur Effect on Image, when user touch the screen

问题描述

我要针对用户在屏幕上触摸的特定位置消除模糊.当用户在屏幕上移动手指时，只有当前的触摸部件才会显示清晰的图像.其余所有屏幕上的图像都会模糊.当用户从屏幕上移开手指时，完整的图像将再次变得模糊.

I want to Remove blur for specific where user Touch on the screen. When User Move his finger on the screen Only current touch part will have clear Image. Rest all screen will have blur Image. And when user remove his finger from the screen complete image will be blur again.

到目前为止，我所做的是:添加了GPUImage框架以使图像模糊.在该图像的顶部，我有一张原始图像.最初是隐藏的.我想要的是，当用户点击屏幕上的内容时，仅使用特定的Circle显示该所选零件的原始图像.

What I have done so far is: Added a GPUImage Framework to make an Image blur. On the top of that Image I have one original image. That is hide initially. What I want is when user Tap on the screen then display original image for that selected part only with the particular Circle.

谢谢

推荐答案

界面生成器

1. 首先将2个UIImageView彼此放置在一起.将它们的两种模式都设置为Aspect Fit.在要模糊的UIImageView上，同时选中User Interaction Enabled.

1. Start by placing 2 UIImageView over each other. Set both their modes to Aspect Fit. On the UIImageView you want to blur, also check User Interaction Enabled.

---

1. 请确保将要模糊化的UIImageView的最近邻约束的间距设置为-10，并且不想将其模糊化的UIImageView到最近邻约束的间距设置为0.

1. Make sure to set the spacing to nearest neighbour constrains of the UIImageView you DO want to blur to -10, and the spacing to nearest neighbour constrains of the UIImageView you DON'T want to blur to 0.

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

We do this because later we apply a GaussianBlurFilter of 10. By applying this filter we add 10 extra pixels in each direction of the image we are going to blur, making the image 20 pixels bigger in height and width. Also make sure to check Clip Subviews in your super view, to prevent the blurred image from going outside it's super view's bounds.

---

.h文件

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

1. In your .h declare the UIImageView you want to blur by ctrl+click dragging it to the .h file. Your .h file should look something like this:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIImageView *uivBlurred;
@end

---

.m文件

1. .m文件中的@synthesize uivBlurred，并声明以下2种方法:

1. In your .m file @synthesize uivBlurred, and declare the following 2 methods:

- (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种方法:

1. Also implement the following 3 methods in your .m file:

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

1. Add the following line to your viewDidLoad

[self blurImageInImageView:uivBlurred];

---

1. 如果一切顺利，您的.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

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

Now add your image, and run the app. You should have something like this:

当您单击图像时:

您还可以在上面的代码此处

You can also download a sample project with the above code here

这篇关于当用户触摸屏幕时，消除图像上的模糊效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！