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

本秂侑毒 提交于 2019-12-12 01:43:54

问题


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.


回答1:


I think what you're describing is something like this:

As you can see, I've punched a radial-gradient hole in an image view, allowing the yellow background to show through.

How was that done? It's a CIFilter ("CIRadialGradient") with clear and black color values, used as the mask of the image view.



来源:https://stackoverflow.com/questions/42011737/create-a-radial-gradient-mask-to-create-a-hole-in-the-picture

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!