Masking with CALayers to have hollow circles in faded black view

Question

I want to draw a view with faded black background color masked with some circles. The way it should look is the circle portion should be hollow and I should be able to see the underneath view.

CALayer masking is not helping me out or may I am not applying them in proper way (see below the commented code).

Below is my code and attached is the screenshot of what I see right now.

Expected: Black faded view with hollow circles in it.

Any suggestions

#pragma Initializer

- (id)initWithFrame:(CGRect)iFrame andHollowFrames:(NSArray *)iHollowFrames {
    if ((self = [super initWithFrame:iFrame]) != nil) {
        self.hollowFrames = [NSArray arrayWithArray:iHollowFrames];
        //self.layer.backgroundColor = CGColorCreateCopyWithAlpha([UIColor blackColor].CGColor, 0.5);

        CAShapeLayer *circle1 = [self circleAt:CGPointMake(20.0, 20.0) ForRadius:10.0 withColor:[UIColor blackColor].CGColor andDashPattern:NO];
        CAShapeLayer *circle2 = [self circleAt:CGPointMake(120.0, 20.0) ForRadius:10.0 withColor:[UIColor blackColor].CGColor andDashPattern:NO];

        CALayer *myLayer = [CAShapeLayer layer];
        myLayer.frame = self.frame;
        myLayer.backgroundColor = CGColorCreateCopyWithAlpha([UIColor blackColor].CGColor, 0.5);
        [self.layer addSublayer:myLayer];

//        [circle1 setMask:myLayer];
//        [circle2 setMask:myLayer];

        [self.layer addSublayer:circle1];
        [self.layer addSublayer:circle2];
    }
    return self;
}



#pragma Drawing Methods

- (CAShapeLayer *)circleAt:(CGPoint)iPoint ForRadius:(CGFloat)iRadius withColor:(CGColorRef)iColor andDashPattern:(BOOL)isDashPattern {
    CAShapeLayer *aSignalcircle = [CAShapeLayer layer];
    aSignalcircle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(iPoint.x, iPoint.y, 2.0 * iRadius, 2.0 * iRadius) cornerRadius:iRadius].CGPath;
    aSignalcircle.position = CGPointMake(0.0 - iRadius, 0.0 - iRadius);
    aSignalcircle.fillColor = [UIColor clearColor].CGColor;
    aSignalcircle.strokeColor = iColor;
    aSignalcircle.lineWidth = kPSSignalStrokeWidth;
    aSignalcircle.backgroundColor = [UIColor clearColor].CGColor;


    if (isDashPattern) {
        aSignalcircle.lineDashPattern = @[@1, @1];
    }

    return aSignalcircle;
}

Answer 1

Got it working with below piece of code:

- (void)addShadowView {
    self.hollowFrames = @[[NSValue valueWithCGPoint:CGPointMake(20.0, 20.0)], [NSValue valueWithCGPoint:CGPointMake(120.0, 20.0)]];

    int radius = 15.0;
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height) cornerRadius:0];

    for (NSValue *point in self.hollowFrames) {
        UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(point.CGPointValue.x, point.CGPointValue.y, 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 blackColor].CGColor;
    fillLayer.opacity = 0.5;
    [self.layer addSublayer:fillLayer];
}

Answer 2

I had a similar issue when I was trying to do something with my code and I fixed this by making a new layer the size of the viewable window that was the color I wanted by filling it with the color and then using the background to be a colorClear and then using the mask there(oh and send to back the full screen later). Your issue is that when the layer is being rendered, the background color will show through even after the cut and not through that level since it's the bottom of the view stack.