SORU
11 HAZİRAN 2013, Salı


Bulanık kaplama bir görünüm oluşturma

Yeni iOS Müzik uygulaması, bir albüm bulanıklaştıran bir görünüm kapak arkasında görebiliriz.

Böyle bir şey nasıl yapılabilir? Belgeleri okudum, ama orada bir şey bulamadık.

CEVAP
11 HAZİRAN 2013, Salı


Çekirdek Görüntü

Ekran görüntüsü, o görüntünün statik olduğundan, Çekirdek Görüntü (iOS 6 gerektirir) CIGaussianBlur kullanabilirsiniz. İşte bir örnek: https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun with Masks/EWDBlurExampleVC.m

Bak, bu ve bu sayfadaki diğer seçenekleri daha yavaştır.

#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;
}

Blur (Kutu) Gauss yığını

  • StackBlur Kutusu ve Gauss karışımı bir bulanıklık uygular. 7x kutu bulanıklaştırma gibi olmayan hızlandırılmış Gauss daha hızlı, ama o kadar da çirkin değil. here (Java eklentisi sürüm) veya here demo (JavaScript). Bu algoritma KDE ve Kamera ve diğerleri kullanılır. Hızlandırmak Çerçeve kullanımı yok ama çok hızlı.

Çerçeve Hızlandırmak

  • Oturum “Uygulama ilgi Çekici UI iOS” WWDC 2013 Apple açıklar oluşturmak için bir bulanık arka plan (14:30), ve söz edilen bir yöntem applyLightEffect uygulanan örnek kodu kullanarak Hızlandırmak.çerçeve.

  • GPUImage OpenGL gölgeleme dinamik bulanıklaştırma oluşturmak için kullanır. Bulanıklık çeşitli türleri vardır: GPUİmageBoxBlurFilter, GPUİmageFastBlurFilter, GaussianSelectiveBlur, GPUİmageGaussianBlurFilter. Bir GPUİmageiOSBlurFilter bile var “tam olarak blur efekti çoğaltmak lazım iOS 7 kontrol paneli sağladı” (, *tweet*13). Bu Makale ayrıntılı ve bilgilendirici.

    -(UIImage *)blurryGPUImage:(UIImage *)image withBlurLevel:(NSInteger)blur {
        GPUImageFastBlurFilter *blurFilter = [GPUImageFastBlurFilter new];
        blurFilter.blurSize = blur;
        UIImage *result = [blurFilter imageByFilteringImage:image];
        return result;
    }
  • İndieambitions.com kimden: Perform a blur using vImage. Algoritma da iOS-RealTimeBlur kullanılır.

  • Nick Lockwood: https://github.com/nicklockwood/FXBlurView örnek bir kaydırma görünümü bulanıklık üzerinde gösterir. Dispatch_async, UİKit, UİScrollView kaydırma için daha fazla öncelik verdiğinde bulanıklık gecikmeli değil yani UİTrackingRunLoopMode ile güncellemeleri aramak için eşitler sonra ortadan kaldırıyor. Bu Nick kitabında açıklanmıştır harika btw iOS Core Animation,.

  • iOS-blur UİToolbar bulanıklaştırma katmanı alır başka bir yere koyar Bu. Apple eğer bu yöntemi kullanırsanız, uygulamanızı reddeder. https://github.com/mochidev/MDBlurView/issues/4 bkz

  • Evadne'nin blog: LiveFrost: Fast, Synchronous UIView Snapshot Convolving. Harika kod ve harika bir okuma. Bu yazı bazı fikirler:

    • CADisplayLink gelen gaz güncellemeleri için bir seri sırası kullanın.
    • Yeniden bitmap sınırları değişmediği sürece çalışır.
    • Küçük resimleri kullanarak[CALayer renderİnContext:] 0.5 f ölçek faktörü ile çizin.

Diğer şeyler

Andy said Twitter Matuschak: “zekice hileler ile statik, gerçek zamanlı olarak yaptığımız gibi yerlerde bir sürü.”

doubleencore.com derler ki “artı doygunluk 10 pt 10 pt artış bulanıklık yarıçapı en iyi iOS 7'nin çoğu durumlarda blur efekti taklit eden bulduk”.

Apple özel başlıklarını bir göz SBFProceduralWallpaperView.

Son olarak, bu gerçek bir bulanıklık değil, ama unutmayın pürüzlü bir görüntü almak için rasterizationScale ayarlayabilirsiniz: http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • DanceOn

    DanceOn

    6 Mayıs 2006
  • Mark Halberstadt

    Mark Halbers

    19 ŞUBAT 2010
  • Paul Schroder

    Paul Schrode

    30 Kasım 2007