Comment dessiner une forme de flou?

Question

Je veux dessiner une forme comme cette image

Je connais le code pour dessiner le cercle. Mais je ne sais pas comment faire la taille de l'évanouissement:

- (void)drawRect:(CGRect)rect { 
    [super drawRect:rect]; 

    CGContextRef c = UIGraphicsGetCurrentContext(); 
    CGContextSetShouldAntialias(c, YES); 

    // Fill background 
    CGContextSetFillColorWithColor(c, [UIColor colorWithWhite:1 alpha:1].CGColor); 
    CGContextAddRect(c, CGRectMake(0, 0, rect.size.width, rect.size.height)); 
    CGContextFillPath(c); 

    // Dark inside 
    if (_type == LDConstrainTypeCircle) { 
     CGContextAddEllipseInRect(c, self.blurRect); 
     CGContextClip(c); 
    } 
    CGContextSetFillColorWithColor(c, [UIColor blackColor].CGColor); 
    CGContextAddRect(c, self.blurRect); 
    CGContextFillPath(c); 
} 

Comment faire l'image comme ça. Mon projet est ciblé iOS 7.0 et versions ultérieures. Merci!

Answer 1

Vous pouvez prendre une capture d'écran de cet élément spécifique et la rendre floue

func captureScreenshot() -> UIImage { 

    UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale) 
    self.layer.render(in: UIGraphicsGetCurrentContext()!) 
    let image = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 

    return image! 

} 

func addBlurEffect() { 
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light) 
    let blurEffectView = UIVisualEffectView(effect: blurEffect) 
    blurEffectView.frame = self.bounds 

    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // for supporting device rotation 
    self.addSubview(blurEffectView) 

    UIView.animate(withDuration: 0.5) { 
     blurEffectView.effect = UIBlurEffect(style: UIBlurEffectStyle.light) 
    } 
} 

Answer 2

Pour iOS 8.0+ utiliser UIVisualEffectView sur votre UIImageView

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))  
visualEffectView.frame = imageView.bounds 
imageView.addSubview(visualEffectView) 

Answer 3

Vous pouvez consulter this blog.

Ce blog vous propose trois options pour l'affichage flou.

1. flou avec le cadre de Core Image
2. flou en utilisant le cadre GPUImage de Brad Larson
3. flou en utilisant UIImage + ImageEffects d'Apple catégorie

---

1. flou avec le cadre Core Image

   -(UIImage *)blurWithCoreImage:(UIImage *)sourceImage 
   { 
   CIImage *inputImage = [CIImage imageWithCGImage:sourceImage.CGImage]; 
   
   // Apply Affine-Clamp filter to stretch the image so that it does not 
   // look shrunken when gaussian blur is applied 
   CGAffineTransform transform = CGAffineTransformIdentity; 
   CIFilter *clampFilter = [CIFilter filterWithName:@"CIAffineClamp"]; 
   [clampFilter setValue:inputImage forKey:@"inputImage"]; 
   [clampFilter setValue:[NSValue valueWithBytes:&transform objCType:@encode(CGAffineTransform)] forKey:@"inputTransform"]; 
   
   // Apply gaussian blur filter with radius of 30 
   CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"]; 
   [gaussianBlurFilter setValue:clampFilter.outputImage forKey: @"inputImage"]; 
   [gaussianBlurFilter setValue:@30 forKey:@"inputRadius"]; 
   
   CIContext *context = [CIContext contextWithOptions:nil]; 
   CGImageRef cgImage = [context createCGImage:gaussianBlurFilter.outputImage fromRect:[inputImage extent]]; 
   
   // Set up output context. 
   UIGraphicsBeginImageContext(self.view.frame.size); 
   CGContextRef outputContext = UIGraphicsGetCurrentContext(); 
   
   // Invert image coordinates 
   CGContextScaleCTM(outputContext, 1.0, -1.0); 
   CGContextTranslateCTM(outputContext, 0, -self.view.frame.size.height); 
   
   // Draw base image. 
   CGContextDrawImage(outputContext, self.view.frame, cgImage); 
   
   // Apply white tint 
   CGContextSaveGState(outputContext); 
   CGContextSetFillColorWithColor(outputContext, [UIColor colorWithWhite:1 alpha:0.2].CGColor); 
   CGContextFillRect(outputContext, self.view.frame); 
   CGContextRestoreGState(outputContext); 
   
   // Output image is ready. 
   UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext(); 
   UIGraphicsEndImageContext(); 
   
   return outputImage; 
   } 
   

---

2. flou en utilisant le cadre GPUImage de Brad Larson

GPUImage est un cadre iOS open source pour l'image et le traitement vidéo, créé et maintenu par Brad Larson. Il comprend une collection de filtres accélérés par le GPU qui peuvent être appliqués aux images, aux vidéos en direct et aux films.

Le GPUImage framework est inclus dans les fichiers sources de ce tutoriel, mais en ajoutant le cadre de vos projets est très facile:

1. Commencez par télécharger le cadre ou le clonage du dépôt de GitHub.
2. Ouvrez une fenêtre de terminal, accédez au dossier GPUImage et exécutez le script de construction build.sh pour compiler le framework.
3. Copiez le fichier GPUImage.framework du dossier de construction dans le dossier de votre projet, puis faites-le glisser dans Project Navigator.
4. Vous pouvez ensuite utiliser le cadre GPUImage dans votre projet en important les en-têtes de cadres, #import <GPUImage/GPUImage.h>.

Le cadre de GPUImage comprend des filtres similaires à ceux dans le cadre de l'image de base.Pour notre exemple d'application, nous nous intéressons à deux filtres, GPUImageGaussianBlurFilter et GPUImageiOSBlurFilter.

-(UIImage *)blurWithGPUImage:(UIImage *)sourceImage 
{ 
    // Gaussian Blur 
    GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init]; 
    blurFilter.blurRadiusInPixels = 30.0; 

    return [blurFilter imageByFilteringImage: sourceImage]; 
} 

au lieu de la classe GPUImageGaussianblur, vous pouvez aussi utiliser la classe GPUImageiOSblur comme ceci:

// iOS Blur

GPUImageiOSBlurFilter *blurFilter = [[GPUImageiOSBlurFilter alloc] init]; 
blurFilter.blurRadiusInPixels = 30.0; 

---

3. flou à l'aide de la catégorie UIImage + ImageEffects d'Apple

Vous pouvez télécharger l'exemple de projet ImageEffects d'Apple sur le site Web des développeurs Apple et l'utiliser dans vos projets.

#import "UIImage+ImageEffects.h" 

... 

- (UIImage *)blurWithImageEffects:(UIImage *)image 
{ 
    return [image applyBlurWithRadius:30 tintColor:[UIColor colorWithWhite:1 alpha:0.2] saturationDeltaFactor:1.5 maskImage:nil]; 
} 

Espérons que cela vous aidera. Codage heureux. :-)