How to create transparent circle in rectangle as Instagram does?

Question

Now I have a rectangle inside of which I resize and crop my image:

    UIGraphicsBeginImageContextWithOptions((scrollView?.bounds.size)!, true, UIScreen.mainScreen().scale)

    let offset = scrollView?.contentOffset
    CGContextTranslateCTM(UIGraphicsGetCurrentContext(), -(offset?.x)!, -offset!.y)
    scrollView!.layer.renderInContext(UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

For whole my controller please look at this Pastebin

So, my question is, how can I make like in Instagram, like this:

How to add black rectangle with the circle center and continue resize my image as I do it now?

It is blend mode. Check this answer http://stackoverflow.com/questions/20673209/how-can-i-colorize-a-black-white-uiimageview-programmatically/20673289#20673289 — sahara108, Jan 06 '16 at 09:48

score 1 · Answer 1 · answered Jan 06 '16 at 10:12

Use this code, this will works perfectly.

    let radius : CGFloat = 50;//make it dynamic as per frame of your imageView
    let path = UIBezierPath(roundedRect: CGRectMake(0, 0, 100, 100) , cornerRadius: 0);//make it dynamic as per frame of your imageview
    let circlePath = UIBezierPath(roundedRect: CGRectMake(0, 0, 2.0*radius , 2.0*radius) , cornerRadius: radius)

    path.appendPath(circlePath);
    path.usesEvenOddFillRule = true;

    let fillLayer = CAShapeLayer();
    fillLayer.path = path.CGPath;
    fillLayer.fillRule = kCAFillRuleEvenOdd;
    fillLayer.fillColor = UIColor.blackColor().CGColor;
    fillLayer.opacity = 0.4;
    self.imageView.layer.addSublayer(fillLayer)

Jaydeep Patel · Answer 2 · 2016-01-06T10:28:45.697

Create one subclass of CALayer

with following code

import UIKit

class GradiantLayer: CALayer {
    func frameSetup() -> CGRect {
        let frameWidth:CGFloat = superlayer!.frame.width
        let frameHeight:CGFloat = superlayer!.frame.height
        let frame = CGRectMake(0, 0, frameWidth, frameHeight)
        return frame
    }

    override func drawInContext(ctx: CGContextRef) {

        let locations :[CGFloat] = [ 0.5, 0.5,1.0 ]
        let colors = [UIColor.clearColor().CGColor,UIColor(red: 0, green: 0, blue: 0, alpha: 0.2).CGColor,UIColor(red: 0, green: 0, blue: 0, alpha: 0.2).CGColor]
        let colorspace : CGColorSpaceRef = CGColorSpaceCreateDeviceRGB()!

        let gradCenter: CGPoint = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2)

        let gradiant2: CGGradientRef = CGGradientCreateWithColors(colorspace, colors as CFArrayRef, locations)!

        CGContextDrawRadialGradient(ctx, gradiant2, gradCenter, 0, gradCenter, self.bounds.size.width, CGGradientDrawingOptions.DrawsAfterEndLocation)

    }

}

Now to add this outside circle use following method in viewDidLoad of viewcontroller

override func viewDidLoad() {
    super.viewDidLoad()
    let gradiant:GradiantLayer = GradiantLayer()
    scrollView?.layer.addSublayer(gradiant)
    gradiant.frame = gradiant.frameSetup()
    gradiant.setNeedsDisplay()
}

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

Please refer to following answer, hopefully it works for you.
Drawing a transparent circle on top of a UIImage - iPhone SDK

Actually main idea is to create square UIView with semi transparent background and drawing UIView with some radius and transparent background upon previously created square UIView.

edited May 23 '17 at 12:16

Community

1
1

answered Jan 06 '16 at 09:10

Aamir

16,329
10
59
65

score 0 · Answer 4 · edited May 23 '17 at 12:16

You could do this easily with 2x CALayer.

Add a CALayer to your view that is the colour you want the outside mask to be. You may need to bring this layer to the front (see here: https://stackoverflow.com/a/11015144/78496)

Then on that new CALayer, set its mask property to a CAShapeLayer with a completely white circle as its path.

You can see how to create the circular CAShapeLayer here: https://stackoverflow.com/a/28442517/78496

How to create transparent circle in rectangle as Instagram does?

4 Answers4