How to Draw the Gaussian Blur Effect?

Question

I need to draw the blur effect on the UIView using Objective C.

Here is my design

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle: UIBlurEffectStyleExtraLight];

    UIVisualEffectView *contentView = [[UIVisualEffectView alloc] initWithEffect: blurEffect];

    contentView.layer.cornerRadius = 18.0;

    contentView.layer.masksToBounds = YES;

    contentView.backgroundColor = [UIColor whiteColor];

    contentView.userInteractionEnabled = NO;

    contentView.layer.shadowRadius = 10;

    contentView.layer.shadowOpacity = 0.2f;

    contentView.layer.shadowColor = [UIColor whiteColor].CGColor;

    contentView.layer.shadowOffset =  CGSizeZero;

    [contentView setFrame: annotationFrame];

    [contentView setTranslatesAutoresizingMaskIntoConstraints: YES];

    self.contentView = contentView;

below screenshot was current output using the above code

I have tried the above code. , but I didn't get the exact blur effect kindly suggest me to draw this design.

I have updated the below code

- (void)drawRect:(CGRect)rect {

    [super drawRect: rect]; //i doubt we need a super drarRect here…

    [self drawMarker: self.markerView fillColor: [UIColor whiteColor]];

    CGContextRef ctx = UIGraphicsGetCurrentContext();


    CGPathRef path = CGPathCreateWithRoundedRect(CGRectInset(rect,  self.frame.size.width/4,  self.frame.size.height/4), self.frame.size.width/8, self.frame.size.height/8, nil);

    CGContextSetFillColorWithColor(ctx,[UIColor slateColor].CGColor);

    CGContextSetShadowWithColor(ctx, CGSizeZero, self.frame.size.height/4,  [UIColor slateColor].CGColor);


    for ( int i = 0; i<=6; i++) {
        CGContextAddPath(ctx, path);
        CGContextFillPath(ctx);
    }

}

I need the blur effect behind my view , kindly advice the me regarding this.

Thank you.

check this https://stackoverflow.com/questions/37745673/blurview-below-a-button-with-fading-edges/37755551#37755551 maybe can help you, let me know — Reinier Melian, May 30 '19 at 08:48
crash or error? this code had 2 years old, i can update it anyway, btw this answer was on swift — Reinier Melian, May 30 '19 at 08:57

score 1 · Answer 1 · answered May 30 '19 at 09:43

Translating my previous answer from swift to Objective-C we have this

@implementation UICustomBackgroundButton


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    [super drawRect:rect];

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGPathRef path = CGPathCreateWithRoundedRect(CGRectInset(rect,  self.frame.size.width/4,  self.frame.size.height/4), self.frame.size.width/8, self.frame.size.height/8, nil);

    CGContextSetFillColorWithColor(ctx,[UIColor blueColor].CGColor);
    CGContextSetShadowWithColor(ctx, CGSizeZero, self.frame.size.height/4,  [UIColor blueColor].CGColor);


    for ( int i = 0; i<=6; i++) {
        CGContextAddPath(ctx, path);
        CGContextFillPath(ctx);
    }
}


@end

Result

#reinier-melian I added the code , but I didn't get the exact blur position kindly check my question I updated the new code and screenshot — Nandhakumar, May 30 '19 at 14:20

score 0 · Answer 2 · answered May 30 '19 at 09:32

0

Check out below reference which I used for the blur effect :

https://dzone.com/articles/applying-gaussian-blur-to-uiviews-with-swift-proto

This applies gaussian blur effect only.

answered May 30 '19 at 09:32

BhargavR

1,095
7
14

How to Draw the Gaussian Blur Effect?

2 Answers2