iOS Drawing Circles

BDGapps picture BDGapps · Mar 5, 2013 · Viewed 9.5k times · Source

I am trying to create the circles below in my iOS app. I know how to make the circles but am not entirely sure on how to get the points along the arc. It has to be in code not an image. Below is also the code I currently have.

enter image description here

 - (void)drawRect:(CGRect)rect
{
    CGPoint point;
    point.x = self.bounds.origin.x + self.bounds.size.width/2;
    point.y = self.bounds.origin.y + self.bounds.size.height/2;

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(context, 2.0);

    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);

    CGRect circle = CGRectMake(point.x/2,point.y-point.x/2,point.x,point.x);

    CGContextAddEllipseInRect(context, circle);

    CGContextStrokePath(context);

    for (int i = 0; i<8; i++) {
        CGRect circleMini = CGRectMake(??????,??????,point.x/4,point.x/4);

        CGContextAddEllipseInRect(context, circleMini);
        CGContextStrokePath(context);
    }

}

UPDATED TO ANSWER

 float cita = 0;
for (int i = 0; i<8; i++) {

    CGPoint pointCir = CGPointMake(point.x/2 + radius * cos(cita) , (point.y-point.x/2) + radius * sin(cita) );
    CGRect circleMini = CGRectMake(pointCir.x,pointCir.y,radius/4,radius/4);

    CGContextAddEllipseInRect(context, circleMini);
    CGContextStrokePath(context);
    cita += M_PI / 4.0;
}

enter image description here

Answer

ikaver picture ikaver · Mar 5, 2013

If (x,y) is the center and r is the radius of your big circle, the center of the i-th external circle will be:

  center(i) = ( x + r * cos(cita) , y + r * sin(cita) )

Start cita in 0 and increment it PI/4 radians for the next circle (or 45 degrees)

Working implementation

CGFloat cita = 0;
CGFloat bigCircleRadius = point.x / 2.0;
CGFloat smallCircleRadius = bigCircleRadius / 4.0;
for (int i = 0; i < 8; i++) {

    CGPoint smallCircleCenter = CGPointMake(point.x  + bigCircleRadius * cos(cita) - smallCircleRadius/2.0 , point.y + bigCircleRadius * sin(cita) - smallCircleRadius / 2.0 );
    CGRect smallCircleRect = CGRectMake(smallCircleCenter.x,smallCircleCenter.y,smallCircleRadius,smallCircleRadius);

    CGContextAddEllipseInRect(context, smallCircleRect);
    CGContextStrokePath(context);
    cita += M_PI / 4.0;
}

Edit: Added implementation and renamed variables.