2014-01-08 4 views
1

Я разрабатываю круговой индикатор выполнения с использованием UIBezierPath и хочу изменить цвет заливки в соответствии с определенным значением.Применить градиент на UIBezierPath с разными цветами

Цвет заливки градиент, который начинается в красный и продолжает тени фиолетового, как следующее:

enter image description here

Я создал дугу и наполнили ее таким образом:

// Draw the arc with bezier path 
    int radius = 100; 

    arc = [CAShapeLayer layer]; 
    arc.path = [UIBezierPath bezierPathWithArcCenter:__optimizePoint(100, 110) radius:radius startAngle:M_PI endAngle:M_PI/150 clockwise:YES].CGPath; 
    if (__isScreenR4) { 
     arc.position = __optimizePoint(60, 182); 
    } else{ 
     arc.position = __optimizePoint(60, 205); 
    } 
    arc.fillColor = [UIColor clearColor].CGColor; 
    arc.strokeColor = __colorApp.CGColor; 
    arc.lineCap = kCALineCapRound; 
    arc.lineWidth = 6; 

    [self.view.layer addSublayer:arc]; 

    // Animation of the progress bar 
    drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.duration   = 5.0; // "animate over 10 seconds or so.." 
    drawAnimation.repeatCount   = 1.0; // Animate only once.. 
    drawAnimation.removedOnCompletion = YES; // Remain stroked after the animation.. 
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
    drawAnimation.toValue = [NSNumber numberWithFloat:1.0f]; 
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; 

для отображения градиента я использовал CAGradientLayer со следующей реализацией:

// Gradient of progress bar 
    gradientLayer = [CAGradientLayer layer]; 
    gradientLayer.frame = self.view.frame; 
    gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:193.0/255.0 green:13.0/255.0 blue:13.0/255.0 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:247.0/255.0 green:166.0/255.0 blue:0.0/255.0 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:255.0/255.0 green:204.0/255.0 blue:0.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:194.0/255.0 green:157.0/255.0 blue:206.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:188.0/255.0 green:154.0/255.0 blue:199.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:167.0/255.0 green:129.0/255.0 blue:185.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:158.0/255.0 green:107.0/255.0 blue:171.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:149.0/255.0 green:86.0/255.0 blue:174.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:139.0/255.0 green:74.0/255.0 blue:151.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:129.0/255.0 green:38.0/255.0 blue:140.0/255.0 alpha:1.0].CGColor ]; 
    gradientLayer.startPoint = CGPointMake(0,0.1); 
    gradientLayer.endPoint = CGPointMake(0.5,0.2); 
    [self.view.layer addSublayer:gradientLayer]; 
    gradientLayer.mask = arc; 

Однако после запуска кода я получаю только дугу, заполненную оттенками, начиная с четвертого пурпурного цвета слева. Есть ли способ начать градиент красного цвета и финишировать в последнем типе фиолетового?

Любая помощь была бы принята с благодарностью!

спасибо.

Granit

ответ

1

Я решил проблему, изменив начало и конечные точки gradientLayer как следующее:

gradientLayer.startPoint = CGPointMake(0.155,0.1); 
gradientLayer.endPoint = CGPointMake(1.0,0.1);