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

Posted

技术标签:

【中文标题】当用户触摸屏幕时,删除图像上的模糊效果[关闭]【英文标题】:Remove blur Effect on Image, when user touch the screen [closed] 【发布时间】:2014-09-09 12:54:24 【问题描述】:

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

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

谢谢

【问题讨论】:

如何将原件置于“水晶风格”半透明矩形下方,并带有“孔”。当用户触摸屏幕时,“洞”会移动到用户按下的位置? 能否详细说明。我怎样才能做到这一点? 类似:cdn.osxdaily.com/wp-content/uploads/2011/07/mousepose.jpg - 但前像的“暗淡”部分实际上只是半透明/部分可见 【参考方案1】:

界面构建器

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

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

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


.h 文件

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

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

.m 文件

    在你的.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;
    
    

    还在你的 .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];
        
    
    

    将以下行添加到您的 viewDidLoad

    [self blurImageInImageView:uivBlurred];


    如果一切顺利,您的 .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的示例项目

【讨论】:

酷。我不确定第二个链接。有空的时候发给我详细信息。感谢您的帮助。 非常感谢。你让我很开心......!!! 你确定你设置的约束正确吗?还可以尝试将图像模式从 Aspect Fit 更改为 Aspect Fill 或 Center,可能会有一些空白,因为图像宽度小于 UIImageView 边界。 你怎么能应用它,而不是在触摸时删除它只是一次删除它@Sander Salmons

以上是关于当用户触摸屏幕时,删除图像上的模糊效果[关闭]的主要内容,如果未能解决你的问题,请参考以下文章

在 iOS 中应用模糊滤镜时如何从图像中删除黑色阴影矩形?

PhoneGap暂停事件,模糊当前屏幕以防止敏感数据显示在快照中

暂停时的快速高斯模糊[关闭]

如何在位图上应用不同的图像效果(滤镜),如棕褐色、黑白、模糊等? [关闭]

滚动时更改元素的高度

在 iPhone 中裁剪后 UIImage 显示模糊