制作渐变弧？

Posted 2023-02-23

【中文标题】制作渐变弧？

【英文标题】：Making a gradient arc?

【发布时间】：2015-09-10 09:35:10

【问题描述】：

我想以这种方式使用CAGradientLayer 制作弧线：-

20% 的弧线具有相同的单色，然后其他 80% 的弧线具有两种颜色的渐变。 我已经在locations 上手动尝试过 startPoint endPoint CAGradientLayer 的属性，但无法获得成功，并且已经从教程中完成，但不知何故无法正确理解这个概念。请通过清晰的描述解决我的问题。

// for beizier path
- (UIBezierPath *)samplePath

    UIBezierPath *path = [UIBezierPath bezierPath];

   path = [UIBezierPath bezierPath];
    [path addArcWithCenter:CGPointMake(200, 200) radius:30.0f startAngle:(3*M_PI)/4 endAngle:M_PI/4   clockwise:YES];
     path.lineWidth = 30;
    [[UIColor redColor] setStroke];
    // [[UIColor colorWithRed:arc4random() green:arc4random() blue:arc4random() alpha:1.0] setFill];
    [path stroke];

    return path;


- (void)startAnimation

    CAShapeLayer *shapeLayer;
    if (self.pathLayer == nil)
    
        shapeLayer = [CAShapeLayer layer];

        shapeLayer.path = [[self samplePath] CGPath];
        shapeLayer.strokeColor = [[UIColor redColor] CGColor];
        shapeLayer.fillColor = nil;
        shapeLayer.lineWidth = 30;
        self.pathLayer = shapeLayer;
    

    [self animationBasic];
    [self gradientLayer:shapeLayer];



-(void)animationBasic

    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3.0;
    pathAnimation.fromValue = @(0.0f);
    pathAnimation.toValue = @(1.0f);
    [self.pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];


-(void)gradientLayer:(CAShapeLayer *)shapelayer


    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.frame;
    gradientLayer.colors = @[(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor redColor].CGColor ];
    gradientLayer.locations = [NSArray arrayWithObjects:
                               [NSNumber numberWithFloat:0.5f],
                               [NSNumber numberWithFloat:1.0f],
                               nil];
    //    gradientLayer.startPoint = CGPointMake(0,1);
    //    gradientLayer.endPoint = CGPointMake(1,1);
    [self.layer addSublayer:gradientLayer];
    gradientLayer.mask = shapelayer;

【问题讨论】：

您需要使用位置属性...发布您尝试过的代码，我们将帮助您正确处理。

@ZeMoon 好的，我正在这样做

@ZeMoon 看一下，请让我准确理解这个概念。

看看我的回答。

谁能帮我解决这个问题

【参考方案1】：

CAGradientLayer 实例的locations 属性应填充@987654325 中指定的每种颜色的起点（我知道，stop 这个词听起来正好相反） @ 属性，从 0 到 1。这些停靠点是从上到下垂直渲染的。

所以，这应该可行：

gradientLayer.locations = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0.0f],
                           [NSNumber numberWithFloat:0.5f],
                           nil];

现在，同时，如果你想让渐变水平（或任何其他方向），你可以利用 startPoint 和 endPoint 属性。

gradientLayer.startPoint = CGPointMake(0.0, 0.5); //Default is (0.5, 0,0)
gradientLayer.endPoint = CGPointMake(1.0, 0.5);   //Default is (0.5, 1.0)
//The gradientLayer will be rendered horizontally.

startingPoint 和endingPoint 属性决定了图层中渐变的方向和布局。这些是在单位坐标系中定义的，其中每个点都定义为一组单位坐标，左上角是原点。所以，(0,0) 对应原点，(1,1) 对应右下角。你可以查看这个优秀的answer 以获得更好的解释。

总而言之，渐变按照startPoint 和endPoint 属性指定的方向和区域呈现，颜色按照locations 属性指定的比率呈现。

最后，你只能通过修改属性并使用各种组合来查看渲染的效​​果。

【讨论】：

我对位置的理解（如果我错了，请纠正我），它说用第一种颜色填充一半，用第二种颜色填充另一半，但无法得到 s.p 和 e.p 的概念

startPoint 和 endPoint 属性指定了整个渐变层在层中的开始和结束位置。它可以从层中的任何相对点到另一个点。如果您仍然无法理解，请说出您无法理解的具体内容。

看看@zemoon的位置清楚地说如果我给gradientLayer框架等于查看框架那么它将填充黄色到框架的0.0到0.5部分，其余部分是红色但我可以，t了解起点和终点的概念。

是的，但这意味着我无法给出径向渐变和我需要的东西，即后者我想用颜色填充 40% 的弧并用其他颜色填充

您是否尝试过专门搜索径向渐变？ ***.com/questions/26907352/…