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];
}