iosimage-processinggpuimagemathematical-morphology

ios making Masked BlurView with Stroke


I have a little advanced question I want to make a custom shape blur on a png image that is half transparent and the png has transparent areas , and then drawing a stroke around the image (avoiding the transparent area in png image). I tried using GPUImage for making blue over image but I get blocked at drawing a stroke around the non-transparent part of the image . I tried using this method (https://stackoverflow.com/a/15010886/4641980) But the stroke is half transparent (following the fact that the image non-transparent part is half transparent ).

I need your help to make this done . This example is nearly what i mean

https://i.sstatic.net/YdITu.png

I have spent alot of time searching and trying but so far in vain , I will be so thankful for your help . Thank you.


Solution

  • You can use "CAShapeLayer" to clip (or mask) the blur image. For this you need a CGPath of the masking (or clipping) shape.

    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.frame=CGRectMake(-imageView.frame.origin.x, -imageView.frame.origin.y, imageView.frame.size.width, imageView.frame.size.height);
    pathLayer.path = yourClippingPath.CGPath;
    pathLayer.strokeColor = [[UIColor blackColor] CGColor];
    pathLayer.fillColor = [[UIColor clearColor] CGColor];
    pathLayer.lineWidth = 6.0;
    pathLayer.lineJoin = kCALineJoinBevel;
    [imageView.layer addSublayer:pathLayer];