当用户触摸屏幕时,删除图像上的模糊效果[关闭]
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文件@synthesize
uivBlurred中,声明以下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以上是关于当用户触摸屏幕时,删除图像上的模糊效果[关闭]的主要内容,如果未能解决你的问题,请参考以下文章
PhoneGap暂停事件,模糊当前屏幕以防止敏感数据显示在快照中