1

我想绘制以下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];
}

但我无法让它看起来像图片中的指示器。我将如何设法获得正确的结果？

4

1 回答 1

1

您尝试复制的示例非常小。如果您查看大版本，您可能会发现更容易剖析——将您的模拟器设置为 Retina 模式，或者在 Retina 设备上截取屏幕截图，然后将其放大。（也许也在这里发布？）另外，不要先考虑代码——想想你在画什么，然后再考虑代码来做这件事。

在我看来你已经得到了什么：两个点都可能由三个同心圆构成，半径分别为 2、3 和 4 pt。对于白色的：首先在深灰色（或半透明黑色）填充中绘制 4 点半径的圆。然后最重要的是，一个 3 点半径的圆，带有浅到中灰色渐变填充（垂直方向，而不是像你那样对角线）。最后，绘制没有填充的内部 2 磅半径圆和 1 磅渐变（从浅到浅灰色）描边。仔细看看黑圈，你可能会想出一个类似的策略来绘制它。

于 2013-05-02T21:24:01.503 回答