圆形CAGradientLayer面具 - iOS [英] Circular CAGradientLayer Mask - iOS

问题描述

我在我的图片上使用 CAGradientLayer 。我使用此代码执行此操作：

I'm using CAGradientLayer on my image. I use this code to do this:

UIImage *image = [UIImage imageNamed:@"perfect.jpg"];

[testImage setImage:image];

CAGradientLayer *myLayer = [CAGradientLayer layer];

myLayer.anchorPoint = CGPointZero;

//starts in bottom left
myLayer.startPoint = CGPointMake(1.0f,1.0f);

//ends in top right
myLayer.endPoint = CGPointMake(1.0f, 0.0f);

UIColor *outerColor = [UIColor colorWithWhite:1.0 alpha:0.0];
UIColor *innerColor = [UIColor colorWithWhite:1.0 alpha:1.0];

//an array of colors that dictatates the gradient(s)
myLayer.colors = @[(id)outerColor.CGColor, (id)outerColor.CGColor, (id)innerColor.CGColor, (id)innerColor.CGColor];

//these are percentage points along the line defined by our startPoint and endPoint and correspond to our colors array. The gradient will shift between the colors between these percentage points.
myLayer.locations = @[@0.0, @0.15, @0.5, @1.0f];

myLayer.bounds = CGRectMake(0, 0, CGRectGetWidth(testImage.bounds), CGRectGetHeight(testImage.bounds));

testImage.layer.mask = myLayer;

[self.view addSubview:testImage];

但我想要的是径向渐变或圆形渐变效果。我只是在一边得到一个渐变。如何实现圆形渐变层？谢谢。

But what I want is a Radial gradient or circle gradient effect. I'm only getting a gradient on one side. How can I achieve a circular gradient layer? Thanks.

推荐答案

如果你想要一个圆形渐变层，你必须子类化并覆盖 - （ void）drawInContext：（CGContextRef）ctx 方法。因为代码非常简单，对于径向渐变应该看起来像这样：

If you want a circular gradient layer you will have to subclass and override the - (void)drawInContext:(CGContextRef)ctx method. In that the code is pretty straight forward and should looks like to something like this for a radial gradient:

        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
        NSArray* colors = @[(id)[UIColor whiteColor].CGColor, (id)[UIColor blackColor].CGColor];
        CGFloat locations[] = {.25, .75};
        CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)colors, locations);
        CGPoint center = (CGPoint){self.bounds.size.width / 2, self.bounds.size.height  / 2};
        CGContextDrawRadialGradient(ctx, gradient, center, 20, center, 40, kCGGradientDrawsAfterEndLocation);

        CGGradientRelease(gradient);
        CGColorSpaceRelease(colorSpace);

请注意我现在无法测试代码，但应该没问题。如果你想要一个像这样的角度渐变而不是径向渐变：

Mind that I cannot test the code right now, but it should be fine. If instead of a radial gradient you want an angle gradient like this one:

你不幸，因为Objective c无法直接制作它。要做到这一点，你可以在你想要的颜色之间循环线性插值并直接绘制它们（不是很难实现但性能很差）或者使用图像作为掩模。

You are unlucky since Objective c has no way to make it directly. To make it you can either loop through a linear interpolation between the colors you want and directly draw them (not so hard to implement but has poor performance) or use an image as a mask.

这篇关于圆形CAGradientLayer面具 - iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！