Create a radial gradient mask to create a hole in the picture

I want to create a radial gradient mask to create a hole in the picture, so that you can see through the picture. I created an overlaying image with a hole and the image beneath is visible, like below:

I am able to create this image using CGImageMaskCreate() successfully. But due to the unusual behaviour of CGImageMaskCreate() in iOS 10.0, I am looking for another solutions.

One such solution is to create image mask using the UIView's maskView property. I am able to write the code for creating the above mentioned image effect using maskView. But its not giving the correct results.

I am not very good with Core Graphics, maybe that's why I am not able to figure out where I am going wrong. My code is:

CGRect rect = CGRectMake(0.0, 0.0, self.view.bounds.size.width, self.view.bounds.size.height);
CGSize size = self.view.bounds.size;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat radius = 160.0;
CGPoint center = CGPointMake(150.0, 150.0);
CGFloat components[] = {1.0,1.0,1.0,1.0,   1.0,1.0,1.0,1.0,    1.0,1.0,1.0,1.0,     1.0,1.0,1.0,1.0,    1.0,1.0,1.0,0.5,    1.0,1.0,1.0,0.0};
CGFloat locations[] = {0.0, 0.1, 0.2, 0.8, 0.9, 1.0};

//creating bitmap context
CGContextRef context = CGBitmapContextCreate(NULL, size.width, size.height, 8, size.width*4, colorSpace, kCGImageAlphaPremultipliedLast|kCGBitmapByteOrder32Big);
//creating gradient
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, 6);
CGContextDrawRadialGradient(context, gradient, center, 0.1, center, radius, 0);
//get the gradient image
CGImageRef imageHole = CGBitmapContextCreateImage(context);
UIImage *img = [UIImage imageWithCGImage:imageHole];
CGGradientRelease(gradient);

//creating mask view whose alpha channels will be used for masking
UIImageView *maskImgView = [[UIImageView alloc] initWithFrame:CGRectMake(50.0, 50.0, 100.0, 100.0)];
[maskImgView setImage:img];

//This is the view on which I want to perform masking
UIImageView *mainView = [[UIImageView alloc] initWithFrame:self.view.bounds];
[mainView setImage:[UIImage imageNamed:@"insta-logo.png"]];
mainView.maskView = maskImgView;
[self.view addSubview:mainView];

This the result I am getting:

The image used is entirely filled with red color. I want the resulting image to be transparent in the gradient region so that you can through it and I want the rest of the area to be red preserving the opacity of the rest of image, like the very first picture I posted.

I want to create this effect using maskView property, because of the unusual behaviour of CAShapeLayer and CGImageMaskCreate() encountered in iOS 10 and later.

Any suggestions will be very helpful. Thank you.

Recommended topics

Hot tags