121

I have a simple view (left side of the picture) and i need to create some kind of overlay (right side of the picture) to this view. This overlay should have some opacity, so the view bellow it is still partly visible. Most importantly this overlay should have a circular hole in the middle of it so it doesn't overlay the center of the view (see picture bellow).

I can easily create a circle like this :

int radius = 20; //whatever
CAShapeLayer *circle = [CAShapeLayer layer];

circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0,radius,radius) cornerRadius:radius].CGPath;
circle.position = CGPointMake(CGRectGetMidX(view.frame)-radius,
                              CGRectGetMidY(view.frame)-radius);
circle.fillColor = [UIColor clearColor].CGColor;

And a "full" rectangular overlay like this :

CAShapeLayer *shadow = [CAShapeLayer layer];
shadow.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, view.bounds.size.width, view.bounds.size.height) cornerRadius:0].CGPath;
shadow.position = CGPointMake(0, 0);
shadow.fillColor = [UIColor grayColor].CGColor;
shadow.lineWidth = 0;
shadow.opacity = 0.5;
[view.layer addSublayer:shadow];

But I have no idea how can I combine these two layers so they create effect I want. Anyone? I've tried really everything... Thanks a lot for help!

Image

5
  • Can you create one bezier which contains the rect and the circle and then the winding rule used during drawing will create a hole (I haven't tried it).
    – Wain
    May 12, 2013 at 22:49
  • i dont know how to do it :) May 12, 2013 at 22:51
  • Create with the rect, then moveToPoint, then add the rounded rect. Check the docs for the methods offered by UIBezierPath.
    – Wain
    May 12, 2013 at 22:59
  • See if this similar question and answer help: [Cut transparent hole in UIView][1] [1]: stackoverflow.com/questions/9711248/…
    – dichen
    Jun 23, 2015 at 5:51
  • Check out my solution here: stackoverflow.com/questions/14141081/… Hopefully this helps someone Oct 5, 2015 at 5:14

5 Answers 5

229

I was able to solve this with Jon Steinmetz suggestion. If any one cares, here's the final solution:

int radius = myRect.size.width;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.mapView.bounds.size.width, self.mapView.bounds.size.height) cornerRadius:0];
UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius];
[path appendPath:circlePath];
[path setUsesEvenOddFillRule:YES];

CAShapeLayer *fillLayer = [CAShapeLayer layer];
fillLayer.path = path.CGPath;
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.fillColor = [UIColor grayColor].CGColor;
fillLayer.opacity = 0.5;
[view.layer addSublayer:fillLayer];

Swift 3.x:

let radius = myRect.size.width
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.mapView.bounds.size.width, height: self.mapView.bounds.size.height), cornerRadius: 0)
let circlePath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 2 * radius, height: 2 * radius), cornerRadius: radius)
path.append(circlePath)
path.usesEvenOddFillRule = true

let fillLayer = CAShapeLayer()
fillLayer.path = path.cgPath
fillLayer.fillRule = kCAFillRuleEvenOdd
fillLayer.fillColor = Color.background.cgColor
fillLayer.opacity = 0.5
view.layer.addSublayer(fillLayer)

Swift 4.2 & 5:

let radius: CGFloat = myRect.size.width
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.view.bounds.size.width, height: self.view.bounds.size.height), cornerRadius: 0)
let circlePath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 2 * radius, height: 2 * radius), cornerRadius: radius)
path.append(circlePath)
path.usesEvenOddFillRule = true

let fillLayer = CAShapeLayer()
fillLayer.path = path.cgPath
fillLayer.fillRule = .evenOdd
fillLayer.fillColor = view.backgroundColor?.cgColor
fillLayer.opacity = 0.5
view.layer.addSublayer(fillLayer)
7
  • 2
    For added flexibility, make your view subclass "IBDesignable". It's really easy! To get started, plug the above code into the answer I gave to this question: stackoverflow.com/questions/14141081/…
    – clozach
    Jul 6, 2015 at 20:42
  • 2
    As a novice iOS developer I've spent few hours trying to figure out, why this code produces weird results. Finally I found, that added sublayers must be removed if overlay mask is recalculated at some point. This is possible via view.layer.sublayers property. Thank you very much for answer!
    – Serzhas
    Jan 4, 2016 at 19:25
  • Why I am getting the exact opposite of it. Clear colored layer with black semi transparent shape?? Jul 27, 2017 at 5:17
  • How i can add a transparent text to a circle using this mode, is possible? i don't find how Oct 1, 2018 at 2:44
  • Almost 6 years, still helps, but keep in mind that the hollow hole does not really 'punch through' the layer that holds it. Say, if overlay the hole over a button. The button is not accessible, which is needed if you are trying to make a 'guided tutorial' like me. The library provided by @Nick Yap will do the job for you, where by overriding func point(inside point: CGPoint, with event: UIEvent?) -> Bool {} of UIView. Check out his library for more details. But, what you expect is just 'visibility to what is behind the mask', this is a valid answer. Oct 10, 2018 at 15:57
34

To create this effect, I found it easiest to create an entire view overlaying the screen, then subtracting portions of the screen using layers and UIBezierPaths. For a Swift implementation:

// Create a view filling the screen.
let overlay = UIView(frame: CGRectMake(0, 0, 
    UIScreen.mainScreen().bounds.width,
    UIScreen.mainScreen().bounds.height))

// Set a semi-transparent, black background.
overlay.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.85)

// Create the initial layer from the view bounds.
let maskLayer = CAShapeLayer()
maskLayer.frame = overlay.bounds
maskLayer.fillColor = UIColor.blackColor().CGColor

// Create the frame for the circle.
let radius: CGFloat = 50.0
let rect = CGRectMake(
        CGRectGetMidX(overlay.frame) - radius,
        CGRectGetMidY(overlay.frame) - radius,
        2 * radius,
        2 * radius)

// Create the path.
let path = UIBezierPath(rect: overlay.bounds)
maskLayer.fillRule = kCAFillRuleEvenOdd

// Append the circle to the path so that it is subtracted.
path.appendPath(UIBezierPath(ovalInRect: rect))
maskLayer.path = path.CGPath

// Set the mask of the view.
overlay.layer.mask = maskLayer

// Add the view so it is visible.
self.view.addSubview(overlay)

I tested the code above, and here is the result:

enter image description here

I added a library to CocoaPods that abstracts away a lot of the above code and allows you to easily create overlays with rectangular/circular holes, allowing the user to interact with views behind the overlay. I used it to create this tutorial for one of our apps:

Tutorial using the TAOverlayView

The library is called TAOverlayView, and is open source under Apache 2.0. I hope you find it useful!

7
  • Also, please do not post duplicate answers. Instead, consider other actions that could help future users find the answer they need, as described in the linked post. When those answers are barely more than a link & recommendation to use your stuff, they appear pretty spammy.
    – Mogsdad
    Mar 15, 2016 at 15:23
  • 1
    @Mogsdad I didn't want to appear spammy, I just spent a good amount of time on this library and I figured it would be useful to people trying to do similar things. But thanks for the feedback, I'll update my answers to use code examples
    – Nick Yap
    Mar 15, 2016 at 20:51
  • 3
    Nice update, Nick. I'm in your corner - I've got published libraries and utilities myself, and I understand that it can seem redundant to put complete answers here when my documentation already covers it... however the idea is to keep answers as self-contained as possible. And there are people posting nothing but spam, so I'd rather not be lumped in with them. I assume you're of the same mind, which is why I pointed it out to you. Cheers!
    – Mogsdad
    Mar 15, 2016 at 21:57
  • I used the pod you created, thanks for it. But my views beneath the overlay stop interacting. Whats wrong with it? I have a Scrollview with imageview inside it. Feb 24, 2017 at 13:29
  • @AmmarMujeeb The overlay blocks interaction except through the "holes" that you create. My intention with the pod was overlays that highlight portions of the screen, and only allow you to interact with the highlighted elements.
    – Nick Yap
    Feb 24, 2017 at 17:23
11

Accepted solution Swift 3.0 compatible

let radius = myRect.size.width
let path = UIBezierPath(roundedRect: CGRect(x: 0.0, y: 0.0, width: self.mapView.bounds.size.width, height: self.mapView.bounds.size.height), cornerRadius: 0)
let circlePath = UIBezierPath(roundedRect: CGRect(x: 0.0, y: 0.0, width: 2.0*radius, height: 2.0*radius), cornerRadius: radius)
path.append(circlePath)
path.usesEvenOddFillRule = true

let fillLayer = CAShapeLayer()
fillLayer.path = path.cgPath
fillLayer.fillRule = kCAFillRuleEvenOdd
fillLayer.fillColor = UIColor.gray.cgColor
fillLayer.opacity = 0.5
view.layer.addSublayer(fillLayer)
1
  • @Fattie: your link is dead
    – Randy
    Apr 4, 2017 at 7:53
10

I took a similar approach as animal_chin, but I'm more visual, so I set most of it up in Interface Builder using outlets and auto layout.

Here is my solution in Swift

    //shadowView is a UIView of what I want to be "solid"
    var outerPath = UIBezierPath(rect: shadowView.frame)

    //croppingView is a subview of shadowView that is laid out in interface builder using auto layout
    //croppingView is hidden.
    var circlePath = UIBezierPath(ovalInRect: croppingView.frame)
    outerPath.usesEvenOddFillRule = true
    outerPath.appendPath(circlePath)

    var maskLayer = CAShapeLayer()
    maskLayer.path = outerPath.CGPath
    maskLayer.fillRule = kCAFillRuleEvenOdd
    maskLayer.fillColor = UIColor.whiteColor().CGColor

    shadowView.layer.mask = maskLayer
2
  • I love this solution because you can move the circlePath around at design time and run time very easily. Jan 31, 2017 at 3:11
  • this didn't work for me, although i modified it to use a normal rect instead of oval, but the final mask image is just coming out wrong :(
    – GameDev
    Jun 1, 2020 at 16:22
7

Code Swift 2.0 compatible

Starting from @animal_inch answer, I code a little utility-class, hope it will appreciate:

import Foundation
import UIKit
import CoreGraphics

/// Apply a circle mask on a target view. You can customize radius, color and opacity of the mask.
class CircleMaskView {

    private var fillLayer = CAShapeLayer()
    var target: UIView?

    var fillColor: UIColor = UIColor.grayColor() {
        didSet {
            self.fillLayer.fillColor = self.fillColor.CGColor
        }
    }

    var radius: CGFloat? {
        didSet {
            self.draw()
        }
    }

    var opacity: Float = 0.5 {
        didSet {
           self.fillLayer.opacity = self.opacity
        }
    }

    /**
    Constructor

    - parameter drawIn: target view

    - returns: object instance
    */
    init(drawIn: UIView) {
        self.target = drawIn
    }

    /**
    Draw a circle mask on target view
    */
    func draw() {
        guard (let target = target) else {
            print("target is nil")
            return
        }

        var rad: CGFloat = 0
        let size = target.frame.size
        if let r = self.radius {
            rad = r
        } else {
            rad = min(size.height, size.width)
        }

        let path = UIBezierPath(roundedRect: CGRectMake(0, 0, size.width, size.height), cornerRadius: 0.0)
        let circlePath = UIBezierPath(roundedRect: CGRectMake(size.width / 2.0 - rad / 2.0, 0, rad, rad), cornerRadius: rad)
        path.appendPath(circlePath)
        path.usesEvenOddFillRule = true

        fillLayer.path = path.CGPath
        fillLayer.fillRule = kCAFillRuleEvenOdd
        fillLayer.fillColor = self.fillColor.CGColor
        fillLayer.opacity = self.opacity
        self.target.layer.addSublayer(fillLayer)
    }

    /**
    Remove circle mask
    */


  func remove() {
        self.fillLayer.removeFromSuperlayer()
    }

}

Then, wherever in your code:

let circle = CircleMaskView(drawIn: <target_view>)
circle.opacity = 0.7
circle.draw()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.