圆形CAGradientLayer遮罩-iOS

Question

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

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];

但是我想要的是径向渐变或圆形渐变效果。 我只在一侧得到渐变。 如何获得圆形渐变图层？ 谢谢。

Answer 1

如果需要圆形渐变图层，则必须- (void)drawInContext:(CGContextRef)ctx并重写- (void)drawInContext:(CGContextRef)ctx方法。 这样的代码非常简单，对于径向渐变应该看起来像这样：

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

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

您很不幸，因为目标c无法直接实现。 为此，您可以在所需的颜色之间循环进行线性插值，然后直接绘制它们（不易实现，但性能较差），也可以使用图像作为遮罩。

Answer 2

这是产生如所附图像所示输出的代码：

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
                        gradientLayer.frame = self.clockView.bounds;
                        [self.clockView.layer addSublayer:gradientLayer];
                        // TO-DO:
                        // add durations
                        gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:1.0/255.0 green:025.0/255.0 blue:147.0/255.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:0.0 green:118.0/255.0 blue:186.0/255.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:153.0/255.0 green:25.0/255.0 blue:94.0/255.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:181.0/255.0 green:23.0/255.0 blue:0.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:255.0/255.0 green:147.0/255.0 blue:0.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:250.0/255.0 green:226.0/255.0 blue:50.0/255.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0].CGColor,

                                                 (__bridge id)[UIColor colorWithRed:250.0/255.0 green:226.0/255.0 blue:50.0/255.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:255.0/255.0 green:147.0/255.0 blue:0.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:181.0/255.0 green:23.0/255.0 blue:0.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:153.0/255.0 green:25.0/255.0 blue:94.0/255.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:0.0 green:118.0/255.0 blue:186.0/255.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:1.0/255.0 green:025.0/255.0 blue:147.0/255.0 alpha:1.0].CGColor,
                        (__bridge id)[UIColor colorWithRed:1.0/255.0 green:025.0/255.0 blue:147.0/255.0 alpha:1.0].CGColor,
                                                 (__bridge id)[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0].CGColor] ;

                        gradientLayer.type = kCAGradientLayerConic;
                        gradientLayer.startPoint = CGPointMake(0.5, 0.5);
                        gradientLayer.endPoint = CGPointMake(1, 1.0);

                        // Circular mask layer
                        CAShapeLayer *maskLayer = [CAShapeLayer layer];
                        maskLayer.frame = gradientLayer.bounds;

                        CGMutablePathRef circlePath = CGPathCreateMutable();
                        CGPathAddEllipseInRect(circlePath, NULL, CGRectInset(self.clockView.layer.bounds, 10.0 , 10.0));

                        maskLayer.path = circlePath;
                        CGPathRelease(circlePath);

                        gradientLayer.mask = maskLayer;

                        // second, smaller circle
                        CALayer *gradientLayer2 = [CALayer layer];
                        gradientLayer2.frame = gradientLayer.bounds;// CGRectMake(0.0, 0.0, self.clockView.bounds.size.width / 2.0, self.clockView.bounds.size.height / 2.0);
                        [gradientLayer2 setBackgroundColor:[UIColor darkGrayColor].CGColor];
                        [self.clockView.layer insertSublayer:gradientLayer2 atIndex:1];

                        // Circular mask layer
                        CAShapeLayer *maskLayer2 = [CAShapeLayer layer];
                        maskLayer2.frame = gradientLayer2.bounds;

                        CGMutablePathRef circlePath2 = CGPathCreateMutable();
                        CGPathAddEllipseInRect(circlePath2, NULL, CGRectInset(self.clockView.layer.bounds, 20.0 , 20.0));

                        maskLayer2.path = circlePath2;
                        CGPathRelease(circlePath2);

                        gradientLayer2.mask = maskLayer2;

[ ] 1