[ios] 흐릿한 오버레이보기 만들기

핵심 이미지

스크린 샷의 이미지는 정적이므로 CIGaussianBlurCore Image에서 사용할 수 있습니다 (iOS 6 필요). 샘플은 다음과 같습니다. https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun%20with%20Masks/EWDBlurExampleVC.m

이 페이지의 다른 옵션보다 속도가 느립니다.

#import <QuartzCore/QuartzCore.h>

- (UIImage*) blur:(UIImage*)theImage
{
    // ***********If you need re-orienting (e.g. trying to blur a photo taken from the device camera front facing camera in portrait mode)
    // theImage = [self reOrientIfNeeded:theImage];

    // create our blurred image
    CIContext *context = [CIContext contextWithOptions:nil];
    CIImage *inputImage = [CIImage imageWithCGImage:theImage.CGImage];

    // setting up Gaussian Blur (we could use one of many filters offered by Core Image)
    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [filter setValue:inputImage forKey:kCIInputImageKey];
    [filter setValue:[NSNumber numberWithFloat:15.0f] forKey:@"inputRadius"];
    CIImage *result = [filter valueForKey:kCIOutputImageKey];

    // CIGaussianBlur has a tendency to shrink the image a little, 
    // this ensures it matches up exactly to the bounds of our original image
    CGImageRef cgImage = [context createCGImage:result fromRect:[inputImage extent]];

    UIImage *returnImage = [UIImage imageWithCGImage:cgImage];//create a UIImage for this function to "return" so that ARC can manage the memory of the blur... ARC can't manage CGImageRefs so we need to release it before this function "returns" and ends.
    CGImageRelease(cgImage);//release CGImageRef because ARC doesn't manage this on its own.

    return returnImage;

    // *************** if you need scaling
    // return [[self class] scaleIfNeeded:cgImage];
}

+(UIImage*) scaleIfNeeded:(CGImageRef)cgimg {
    bool isRetina = [[[UIDevice currentDevice] systemVersion] intValue] >= 4 && [[UIScreen mainScreen] scale] == 2.0;
    if (isRetina) {
        return [UIImage imageWithCGImage:cgimg scale:2.0 orientation:UIImageOrientationUp];
    } else {
        return [UIImage imageWithCGImage:cgimg];
    }
}

- (UIImage*) reOrientIfNeeded:(UIImage*)theImage{

    if (theImage.imageOrientation != UIImageOrientationUp) {

        CGAffineTransform reOrient = CGAffineTransformIdentity;
        switch (theImage.imageOrientation) {
            case UIImageOrientationDown:
            case UIImageOrientationDownMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.width, theImage.size.height);
                reOrient = CGAffineTransformRotate(reOrient, M_PI);
                break;
            case UIImageOrientationLeft:
            case UIImageOrientationLeftMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.width, 0);
                reOrient = CGAffineTransformRotate(reOrient, M_PI_2);
                break;
            case UIImageOrientationRight:
            case UIImageOrientationRightMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, 0, theImage.size.height);
                reOrient = CGAffineTransformRotate(reOrient, -M_PI_2);
                break;
            case UIImageOrientationUp:
            case UIImageOrientationUpMirrored:
                break;
        }

        switch (theImage.imageOrientation) {
            case UIImageOrientationUpMirrored:
            case UIImageOrientationDownMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.width, 0);
                reOrient = CGAffineTransformScale(reOrient, -1, 1);
                break;
            case UIImageOrientationLeftMirrored:
            case UIImageOrientationRightMirrored:
                reOrient = CGAffineTransformTranslate(reOrient, theImage.size.height, 0);
                reOrient = CGAffineTransformScale(reOrient, -1, 1);
                break;
            case UIImageOrientationUp:
            case UIImageOrientationDown:
            case UIImageOrientationLeft:
            case UIImageOrientationRight:
                break;
        }

        CGContextRef myContext = CGBitmapContextCreate(NULL, theImage.size.width, theImage.size.height, CGImageGetBitsPerComponent(theImage.CGImage), 0, CGImageGetColorSpace(theImage.CGImage), CGImageGetBitmapInfo(theImage.CGImage));

        CGContextConcatCTM(myContext, reOrient);

        switch (theImage.imageOrientation) {
            case UIImageOrientationLeft:
            case UIImageOrientationLeftMirrored:
            case UIImageOrientationRight:
            case UIImageOrientationRightMirrored:
                CGContextDrawImage(myContext, CGRectMake(0,0,theImage.size.height,theImage.size.width), theImage.CGImage);
                break;

            default:
                CGContextDrawImage(myContext, CGRectMake(0,0,theImage.size.width,theImage.size.height), theImage.CGImage);
                break;
        }

        CGImageRef CGImg = CGBitmapContextCreateImage(myContext);
        theImage = [UIImage imageWithCGImage:CGImg];

        CGImageRelease(CGImg);
        CGContextRelease(myContext);
    }

    return theImage;
}

스택 블러 (박스 + 가우스)

• StackBlur 이것은 Box와 Gaussian blur의 혼합을 구현합니다. 비가 속 가우시안보다 7 배 빠르지 만 상자가 흐릿하게 보이지는 않습니다. 여기 (자바 플러그인 버전) 또는 여기 (자바 스크립트 버전) 데모를 참조하십시오 . 이 알고리즘은 KDE 및 Camera + 및 기타에서 사용됩니다. Accelerate Framework를 사용하지 않지만 빠릅니다.

프레임 워크 가속화

• WWDC 2013 Apple의 “iOS에서 Engaging UI 구현”세션에서 배경을 흐리게 만드는 방법 (14:30에)을 설명하고 applyLightEffectAccelerate.framework를 사용하여 샘플 코드에서 구현 된 방법에 대해 언급합니다 .

• GPUImage 는 OpenGL 쉐이더를 사용하여 동적 흐림 효과를 만듭니다. GPUImageBoxBlurFilter, GPUImageFastBlurFilter, GaussianSelectiveBlur, GPUImageGaussianBlurFilter와 같은 여러 유형의 흐림 효과가 있습니다. “iOS 7의 제어판에서 제공하는 흐림 효과를 완전히 복제해야합니다”( tweet , article ) 의 GPUImageiOSBlurFilter도 있습니다 . 이 기사는 상세하고 유익합니다.

    -(UIImage *) blurryGPUImage : (UIImage *) BlurLevel이있는 이미지 : (NSInteger) blur {
        GPUImageFastBlurFilter * blurFilter = [GPUImageFastBlurFilter 새로운 기능];
        blurFilter.blurSize = 흐림;
        UIImage * result = [blurFilter imageByFilteringImage : image];
        결과 반환;
    }

• indieambitions.com에서 : vImage를 사용하여 흐림 효과를 수행하십시오 . 이 알고리즘은 iOS-RealTimeBlur 에서도 사용됩니다 .

• Nick Lockwood에서 : https://github.com/nicklockwood/FXBlurView 이 예는 스크롤보기에서의 흐림 효과를 보여줍니다. dispatch_async로 흐리게 처리 한 다음 UITrackingRunLoopMode를 사용하여 업데이트를 호출하도록 동기화하므로 UIKit이 UIScrollView의 스크롤에 더 높은 우선 순위를 부여하면 흐림이 지연되지 않습니다. 이 내용은 Nick의 저서 iOS Core Animation에 설명되어 있습니다.

• 아이폰 OS는 흐림 이것은 UIToolbar 다른 곳 박았을의 흐리게 계층을합니다. 이 방법을 사용하면 Apple에서 앱을 거부합니다. https://github.com/mochidev/MDBlurView/issues/4를 참조 하십시오.

• Evadne 블로그에서 : LiveFrost : 빠르고 동기화 된 UIView Snapshot Convolving . 훌륭한 코드와 훌륭한 읽기. 이 게시물의 일부 아이디어 :

  • 직렬 큐를 사용하여 CADisplayLink의 업데이트를 조절하십시오.
  • 범위가 변경되지 않는 한 비트 맵 컨텍스트를 재사용하십시오.
  • 0.5f 스케일 팩터와 함께-[CALayer renderInContext :]를 사용하여 더 작은 이미지를 그립니다.

다른 것들

Andy Matuschak 은 트위터에서“우리가 실시간으로하는 것처럼 보이는 많은 장소는 영리한 속임수로 정체되어있다”고 말했다.

에서 doubleencore.com을 그들이 말하는 “우리는 10 백금 흐림 반경 플러스 대부분의 상황에서 채도 10 백금 증가 최선을 모방 아이폰 OS 7의 흐림 효과를 발견했습니다.”

Apple의 SBFProceduralWallpaperView 의 개인 헤더를 살펴 보십시오 .

마지막으로, 이것은 실제 흐림은 아니지만 픽셀 화 된 이미지를 얻도록 rasterizationScale을 설정할 수 있습니다. http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/

답변

- (UIView *)applyBlurToView:(UIView *)view withEffectStyle:(UIBlurEffectStyle)style andConstraints:(BOOL)addConstraints
{
  //only apply the blur if the user hasn't disabled transparency effects
  if(!UIAccessibilityIsReduceTransparencyEnabled())
  {
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:style];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    blurEffectView.frame = view.bounds;

    [view addSubview:blurEffectView];

    if(addConstraints)
    {
      //add auto layout constraints so that the blur fills the screen upon rotating device
      [blurEffectView setTranslatesAutoresizingMaskIntoConstraints:NO];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeTop
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeTop
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeBottom
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeBottom
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeLeading
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeLeading
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeTrailing
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeTrailing
                                                      multiplier:1
                                                        constant:0]];
    }
  }
  else
  {
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7];
  }

  return view;
}

@interface BlurExampleViewController ()
@property (weak, nonatomic) IBOutlet UIView *backgroundColorView;
@end

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.barStyle = UIBarStyleBlack; // this will give a black blur as in the original post
    self.backgroundColorView.opaque = NO;
    self.backgroundColorView.alpha = 0.5;
    self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
}

[self addChildViewController:self.blurViewController];
[self.view addSubview:self.blurViewController.view];
[self.blurViewController didMoveToParentViewController:self];

// animate the self.blurViewController into view

UIColor *color = [UIColor blueColor]; // for example
self.barTintColor = [color colorWithAlphaComponent:0.5];

func blur(image image: UIImage) -> UIImage {
    let radius: CGFloat = 20;
    let context = CIContext(options: nil);
    let inputImage = CIImage(CGImage: image.CGImage!);
    let filter = CIFilter(name: "CIGaussianBlur");
    filter?.setValue(inputImage, forKey: kCIInputImageKey);
    filter?.setValue("\(radius)", forKey:kCIInputRadiusKey);
    let result = filter?.valueForKey(kCIOutputImageKey) as! CIImage;
    let rect = CGRectMake(radius * 2, radius * 2, image.size.width - radius * 4, image.size.height - radius * 4)
    let cgImage = context.createCGImage(result, fromRect: rect);
    let returnImage = UIImage(CGImage: cgImage);

    return returnImage;
}

class BlurViewController: UIViewController {
    private let blurEffect = (NSClassFromString("_UICustomBlurEffect") as! UIBlurEffect.Type).init()

    override func viewDidLoad() {
        super.viewDidLoad()
        let blurView = UIVisualEffectView(frame: UIScreen.main.bounds)
        blurEffect.setValue(1, forKeyPath: "blurRadius")
        blurView.effect = blurEffect
        view.addSubview(blurView)
    }
}