圆形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方法。这段代码非常简单，应该看起来像这样的径向渐变：

        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