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.

You should have an array of color components in your gradient code. This may sound silly, but would switching around the colors help? Or do you want to invert the colors in any context? — architectpianist, Jul 07 '13 at 14:25
@architectpianist no i tried switching colors but it was no good. — maven25, Jul 08 '13 at 04:05

score 0 · Accepted Answer · answered Jan 15 '14 at 13:37

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

I know its late to comment but the solution you provided is a lot better. Thank you. — maven25, Nov 24 '14 at 07:33

Invert a radial gradient mask in core graphics

1 Answers1