Как рисовать вложенные радиальные градиенты на iOS?

Question

Я разрабатываю приложение iOS 5.0+ с последним SDK.

Я хочу сделать что-то похожее на

Я хочу знать, как гнездо радиальных градиентов.

Это мой код прямо сейчас:

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context 
{ 
    _innerColor = [UIColor yellowColor]; 
    _outerColor = [UIColor redColor]; 

    CGContextSetAllowsAntialiasing(context, true); 
    CGContextSetShouldAntialias(context, true); 

    CGFloat graWidth = layer.frame.size.width/2; 
    CGFloat graHeight = layer.frame.size.height/2; 

    CGFloat firstGlossLocation = 0.0f; 
    CGFloat outterPercent = 0.0f; 

    if (_isUnSelected) 
    { 
     firstGlossLocation = 0.7f; 
     outterPercent = graWidth * 0.0f; 
    } 
    else 
    { 
     firstGlossLocation = 0.0f; 
     outterPercent = graWidth * 0.25f; 
    } 

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 

    CGFloat iRed = 0.0, iGreen = 0.0, iBlue = 0.0, iAlpha =0.0; 
    [_innerColor getRed:&iRed green:&iGreen blue:&iBlue alpha:&iAlpha]; 

    CGFloat oRed = 0.0, oGreen = 0.0, oBlue = 0.0, oAlpha =0.0; 
    [_outerColor getRed:&oRed green:&oGreen blue:&oBlue alpha:&oAlpha]; 

    CGFloat gradientColors[] = { 
     oRed, oGreen, oBlue, oAlpha, 
     iRed, iGreen, iBlue, iAlpha 
    }; 

    // We have to change first value when user taps over the Guage. 
    // The second one must one to fill the entire Gauge. 
    CGFloat glossLocations[] = {firstGlossLocation, 1}; 
    CGGradientRef ballGradient = CGGradientCreateWithColorComponents(colorSpace, gradientColors, glossLocations, 2); 

    CGContextAddEllipseInRect(context, CGRectMake(0, 0, graWidth*2, graHeight*2)); 
    CGContextClip(context); 

    CGPoint startPoint = CGPointMake(graWidth, graHeight); 
    CGPoint endPoint = CGPointMake(graWidth, graHeight); 
    CGContextDrawRadialGradient(context, ballGradient, startPoint, 0, endPoint, graWidth - outterPercent, kCGGradientDrawsAfterEndLocation); 
    CGContextDrawPath(context, kCGPathStroke); 
} 

Я хочу, чтобы нарисовать второй градиент, когда _isUnSelected является NO.

Знаете ли вы, как я могу нарисовать второй вложенный градиент?

Answer 1

Вам не нужен «второй вложенный градиент», чтобы нарисовать градиент, показанный на иллюстрации. То есть один градиент. Градиент может иметь несколько цветов в нескольких местах, и это то, что мы видим на этой иллюстрации. Кажется, у него четыре цвета/точки.

Итак, когда рисунок необходимо изменить, просто замените первый градиент (ваш простой двухточечный градиент) вторым градиентом (с четырьмя цветами/точками) и vice versa.