CAShapeLayer 上的渐变颜色效果

Posted 2023-03-11

【中文标题】CAShapeLayer 上的渐变颜色效果

【英文标题】：Gradient color effect on CAShapeLayer

【发布时间】：2013-04-04 08:16:36

【问题描述】：

我正在尝试在 CAShapeLayer 上应用渐变颜色。为此我编写代码，

-(void)addCircle

    // Drawing code
    UIBezierPath *aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
                                                         radius:125
                                                     startAngle:0
                                                       endAngle:DEGREES_TO_RADIANS(180)
                                                      clockwise:NO];


    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    [shapeLayer setFrame: self.frame];
    [shapeLayer setPath: [aPath CGPath]];
    shapeLayer.lineWidth = 30.0f;
    [shapeLayer setStrokeColor:[[UIColor redColor] CGColor]];
    shapeLayer.fillColor = [[UIColor clearColor] CGColor];
    [shapeLayer setMasksToBounds:YES];


    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.startPoint = CGPointMake(0.5,1.0);
    gradientLayer.endPoint = CGPointMake(0.5,0.0);
    gradientLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
    NSMutableArray *colors = [NSMutableArray array];
    for (int i = 0; i < 10; i++) 
        [colors addObject:(id)[[UIColor colorWithHue:(0.1 * i) saturation:1 brightness:.8 alpha:1] CGColor]];
    
    gradientLayer.colors = colors;
    [gradientLayer setMask:shapeLayer];

    [self.layer addSublayer:shapeLayer];

但是我没有像这样的渐变颜色输出，

我想要这样的最终输出，

但我的主要目标是在 CAShapeLayer 上应用渐变效果。我给定的代码内容哪里错了？

【问题讨论】：

在drawRect:里面加子层肯定是错的。

话虽如此：您似乎在混合两种不同的绘图方法。一个是drawRect中的自定义绘图：一个是图层。无论您选择哪种方法，您都必须通过添加阴影和遮盖白色渐变的几个步骤进行绘图。你能澄清一下你有什么问题吗？

@DavidRönnqvist，首先我很高兴向我展示我的错误。我想在红色圆圈上应用渐变颜色效果。看我的第二张图片，我想创建相同的效果。实际上我不知道如何创建最终输出米圈，但我假设第二张图像上的薄白色就像渐变层，这就是我选择这个场景的原因。

现在我编辑了我的代码。我从 draw rect 方法中删除代码并将其添加到单独的方法中

【参考方案1】：

主要问题是您将shapeLayer 添加到视图层，但实际上您只是想将其用作掩码，因此您应该添加gradientLayer。

下一个问题是CAGradientLayer 不支持像第二个屏幕截图中那样的径向渐变。您需要进行自定义绘图以实现该效果（或仅使用图像）。

【讨论】：

哦！！！！第二张图片包含径向渐变效果？现在我想知道如何使用图像来创建渐变效果。