ios - 用Core Graphics绘制UIPageControl Indicator？

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 pt 半径的圆圈，带有浅到中等灰色渐变填充(垂直方向，而不是像你那样对角线)。最后，绘制没有填充和 1pt 渐变(从浅到浅灰色)描边的 2 pt 半径内圆。仔细观察黑圈，您可能会想出类似的绘制策略。