使用核心图形绘制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点半径圆。然后在它的顶部，一个3点半径的圆圈，带有浅灰色渐变填充（垂直方向，不像对角线那样）。最后，画出没有填充的内部2点半径圆和1pt渐变（浅灰色到浅灰色）笔划。仔细看看黑圈，你可能会想出一个类似的策略来绘制它。