Рисовать индикатор UIPageControl с графикой ядра?

Question

Я хочу сделать следующий UIPageControl индикатор:

настоящее время у меня следующий код, который приводит:

if (isHighlighted) { 
    UIBezierPath *ovalPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 6, 6)]; 

    [[UIColor blackColor] setStroke]; 
    [ovalPath stroke]; 
    [ovalPath addClip]; 

    UIColor *lightGradientColor = [UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:1.0]; 
    UIColor *darkGradientColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1.0]; 

    CGFloat locations[2] = {0.0 ,1.0}; 
    CFArrayRef colors = (__bridge CFArrayRef) [NSArray arrayWithObjects:(id)lightGradientColor.CGColor, 
       (id)darkGradientColor.CGColor, 
       nil]; 
    CGColorSpaceRef colorSpc = CGColorSpaceCreateDeviceRGB(); 
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpc, colors, locations); 

    CGContextDrawLinearGradient(context, gradient, CGPointMake(CGRectGetMaxX([ovalPath bounds]), 0), CGPointMake(0, CGRectGetMaxY([ovalPath bounds])), (CGGradientDrawingOptions)NULL); 

    CGColorSpaceRelease(colorSpc); 
    CGGradientRelease(gradient); 
} else { 
    UIBezierPath *ovalPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 6, 6)]; 
    [[UIColor colorWithWhite:1 alpha:0.3] setFill]; 
    [[UIColor whiteColor] setFill]; 
    [ovalPath fill]; 
} 

Но я не могу получить его чтобы выглядеть как индикатор на картинке. Как мне удастся получить правильный результат?

Answer 1

Пример, который вы пытаетесь воспроизвести, это действительно крошечный. Возможно, вам будет легче рассекать, если вы посмотрите на большую версию - установите ваш симулятор в режим Retina или сделайте снимок экрана на устройстве Retina и взорвите его. (Может быть, и пост здесь тоже?) Кроме того, не думайте сначала код - подумайте о том, что вы рисуете, а затем подумайте о коде, чтобы сделать это.

Как мне кажется, у вас есть: обе точки могут быть построены с тремя концентрическими кругами, радиусом 2, 3 и 4 пт. Для белого: сначала нарисуйте круг 4-pt-radius в темно-сером (или полупрозрачном черном) заполнении. Затем, кроме того, окружность 3-pt-radius с заполнением градиентом от светлого до среднего серого (ориентирована вертикально, а не по диагонали, как у вас). Наконец, нарисуйте внутренний круг 2-pt-radius без заливки и 1 градиент градиента (светло-серого цвета). Внимательно посмотрите на темный круг, и вы, вероятно, можете придумать аналогичную стратегию для рисования.