Invert a radial gradient mask in core graphics

Question

I am able to mask a picture with black/white radial gradient in iOS using core graphics. But I am getting result just the opposite I want. I want the picture to be transparent from the region where gradient is applied and shall display the remaining part of the picture. That means a "![hole][1]" in the picture. But here the hole will be created by a gradient mask.

Can anyone please suggest me some way or any hint to invert the radial gradient mask, just like we do in photoshop.

Answer 1

Instead of using mask, I think the best way is to insert the layer. That's what I did for my IOS app.

- (void) addSublayer {
    CGPoint center = CGPointMake(self.addButton.frame.origin.x, self.addButton.frame.origin.y);
    UIBezierPath* clip = [UIBezierPath bezierPathWithArcCenter:center
                                                    radius:CGRectGetMaxX(self.addUnavailabilitySubView.frame) - self.addButton.center.x
                                                startAngle:-1.57
                                                  endAngle:1.57
                                                 clockwise:YES];
    [clip addLineToPoint:center];
    [clip closePath];

    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    [shapeLayer setMasksToBounds:YES];
    shapeLayer.frame = self.view.layer.bounds;
    shapeLayer.path = clip.CGPath;

    //This gradient layer can be a customised one
    CALayer *gradientLayer = [CALayer layer];
    gradientLayer.frame = CGRectMake(0, 0, self.view.bounds.size.height, self.view.bounds.size.width);

    [self.view.layer insertSublayer:gradientLayer atIndex:0];
}

I can also share my radial gradient layer here :)

-(void)drawInContext:(CGContextRef)ctx {
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 }; // End color

    CGFloat components[8] = {0.f, 0.f, 0.f, 0.3f, 0.f, 0.f, 0.f, 0.8f};

    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, num_locations);

    CGFloat myStartRadius, myEndRadius;

    CGPoint radialCenter = CGPointMake(100, 100)
    myStartRadius = 20;
    myEndRadius = 300;
    CGContextDrawRadialGradient (ctx, gradient, radialCenter,
                             myStartRadius, radialCenter, myEndRadius,
                             kCGGradientDrawsAfterEndLocation);
}