用 CAShapeLayer 实现绘制渐变弧

Posted 2023-02-23

【中文标题】用 CAShapeLayer 实现绘制渐变弧

【英文标题】：Implement drawing gradient arc with CAShapeLayer

【发布时间】：2015-12-23 16:26:00

【问题描述】：

参考here找到的已接受答案我正在尝试实现这一点并遇到CAShapeLayer路径的问题我拥有的代码如下：

-(void)drawGradientArc
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];

    CAShapeLayer *circleLayer = [CAShapeLayer new];
    circleLayer.lineWidth = 25;
    circleLayer.fillColor = [UIColor clearColor].CGColor;
    circleLayer.strokeColor = [UIColor redColor].CGColor;

    CGFloat radius = 150;


    [bezierPath addArcWithCenter:self.view.center radius:radius startAngle:0 endAngle:M_PI clockwise:YES];


    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.startPoint = CGPointMake(0,0);
    gradientLayer.endPoint = CGPointMake(1,0);


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

    circleLayer.path = bezierPath.CGPath;

    [self.view.layer addSublayer:circleLayer];

这将正确绘制半圆弧，但渐变的路径设置不正确，我无法拼凑出如何准确配置代码以使其使用渐变工作。有一个CGPathCreateCopyByStrokingPath，我想我可能还需要调用它来为渐变正确设置路径，但不太确定如何设置。任何有关如何构建代码以使其正常工作的帮助将不胜感激。我还包含了我试图重现的渐变图像。 CAShapeLayer 和 CAGradientLayerapproach 将是理想的。

【参考方案1】：

问题 1：您的图层没有框架。添加这个：

gradientLayer.frame = self.view.layer.bounds;
circleLayer.frame = gradientLayer.bounds;

问题 2：您在视图层中添加了错误的层。你在哪里：

[self.view.layer addSublayer:circleLayer];

改为这样说：

[self.view.layer addSublayer:gradientLayer];

结果：

【讨论】：

这不会解决你所有的问题，但至少你会在屏幕上看到 something 有意义，然后修复你的代码将非常简单。

在为 gradientLayer 和 shapeLayer 设置框架时使用它可以完全按照需要工作。谢谢！

嗯，它与您的绘图相反。但这应该很容易解决！

是的，没问题，我只关心看到彩虹弧。再次感谢！

是的，我认为看到彩虹会让你更快乐。 :)