How to draw a blur shape?

Question

I want to draw a shape like this image

I know the code to draw the circle. But I don't know how to make the fading size:

- (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);
}

How to make the image like that. My project is targeted iOS 7.0 and later. Thanks!

Answer 1

You can take a screenshot of that specific element and blur it

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

For iOS 8.0+ use UIVisualEffectView on your UIImageView

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

Answer 3

You can refer this blog.

This blog gives you three options for blurring view.

1. blurring with the Core Image framework
2. blurring using Brad Larson's GPUImage framework
3. blurring using Apple's UIImage+ImageEffects category

---

1. blurring with the Core Image framework

   -(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. blurring using Brad Larson's GPUImage framework

GPUImage is an open-source iOS framework for image and video processing, created and maintained by Brad Larson. It includes a collection of GPU-accelerated filters that can be applied to images, live camera video, and movies.

The GPUImage framework is included in the source files of this tutorial, but adding the framework to your own projects is very easy:

1. Start by downloading the framework or cloning the repository from GitHub.
2. Open a terminal window, navigate to the GPUImage folder, and run the build script build.sh to compile the framework.
3. Copy the GPUImage.framework from the build folder to your project's folder and then drag-and-drop it into the Project Navigator.
4. You can then use the GPUImage framework in your project by importing the frameworks headers, #import <GPUImage/GPUImage.h>.

The GPUImage framework includes filters similar to those in the Core Image framework. For our sample application, we are interested in two filters, , GPUImageGaussianBlurFilter and GPUImageiOSBlurFilter.

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

    return [blurFilter imageByFilteringImage: sourceImage];
}

Instead of the GPUImageGaussianblur class, you could also use the GPUImageiOSblur class like so:

// iOS Blur

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

---

3. blurring using Apple's UIImage+ImageEffects category

You can download Apple's ImageEffects sample project from Apple's developer website and use it in your projects.

#import "UIImage+ImageEffects.h"

...

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

Hope this will help you. Happy coding. :-)