画空心圆分为等份

Question

我想画一个看起来像下面图像的空心圆圈

我得到以下代码片段来绘制空心圆

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor whiteColor];

        // Determine our start and stop angles for the arc (in radians)
        startAngle = M_PI * 1.5;
        endAngle = startAngle + (M_PI * 2);

    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    // Display our percentage as a string
    NSString* textContent = [NSString stringWithFormat:@"%d", self.percent];

    UIBezierPath* bezierPath = [UIBezierPath bezierPath];

    // Create our arc, with the correct angles
    [bezierPath addArcWithCenter:CGPointMake(rect.size.width / 2, rect.size.height / 2)
                          radius:130
                      startAngle:startAngle
                        endAngle:(endAngle - startAngle) * (_percent / 100.0) + startAngle
                       clockwise:YES];


    // Set the display for the path, and stroke it
    bezierPath.lineWidth = 50;
    [[UIColor redColor] setStroke];
    [bezierPath stroke];

    // Text Drawing
    CGRect textRect = CGRectMake((rect.size.width / 2.0) - 71/2.0, (rect.size.height / 2.0) - 45/2.0, 71, 45);
    [[UIColor blackColor] setFill];
    [textContent drawInRect: textRect withFont: [UIFont fontWithName: @"Helvetica-Bold" size: 42.5] lineBreakMode: NSLineBreakByWordWrapping alignment: NSTextAlignmentCenter];
}

我也需要在空心圆圈中的分隔线，如上图所示。任何建议都会有所帮助....

Answer 1

看看HKCircularProgressView。 我正在将它用于我自己的项目，为您的需求扩展功能应该很容易。

Answer 2

没有完全回答被问到的问题，而是一个简单的解决方案，用于将任意圆分成三个相等的部分来解决我的目的 -

- (void)drawRect:(CGRect)rect {

CGPoint center = CGPointMake(CGRectGetWidth(self.bounds) / 2.f, CGRectGetHeight(self.bounds) / 2.f);
CGFloat radius = 8.f;

UIBezierPath *portionPath1 = [UIBezierPath bezierPath];
[portionPath1 moveToPoint:center];
[portionPath1 addArcWithCenter:center radius:radius startAngle:radians(0) endAngle:radians(120) clockwise:YES];
[portionPath1 closePath];

[[UIColor greenColor] setFill];
[portionPath1 fill];

UIBezierPath *portionPath2 = [UIBezierPath bezierPath];
[portionPath2 moveToPoint:center];
[portionPath2 addArcWithCenter:center radius:radius startAngle:radians(120) endAngle:radians(240) clockwise:YES];
[portionPath2 closePath];

[[UIColor yellowColor] setFill];
[portionPath2 fill];

UIBezierPath *portionPath3 = [UIBezierPath bezierPath];
[portionPath3 moveToPoint:center];
[portionPath3 addArcWithCenter:center radius:radius startAngle:radians(240) endAngle:radians(360) clockwise:YES];
[portionPath3 closePath];

[[UIColor blueColor] setFill];
[portionPath3 fill]; }

在顶部放上这两行。

#define PI 3.14159265358979323846
static inline float radians(double degrees) { return degrees * PI / 180; }

希望这对其他人也有帮助。 ：）