Core Graphics - drawing a line at an angle

Question

I've been searching struggling with this for a while now and need some help. I just want to draw 25 lines from the centre of my display (160,200) at 14.4 degrees separation. I have been using this line of code in a for loop where x is the 14.4 degree multiplier -

    UIImage*backgroundImage = [UIImage imageNamed:@"Primate Background Only.png"];
[backgroundImage drawInRect:CGRectMake(0, 0, 320, 480)];

// Draw Outer Circle

rect = CGRectMake(0.0, 35.0, 320.0, 320.0);     
CGContextRef contextRef = UIGraphicsGetCurrentContext();                // Get the contextRef
CGContextSetLineWidth       (contextRef, 0.5);                  // Set the border width
CGContextSetRGBFillColor    (contextRef, (219.0f/255.0f), (219.0f/255.0f), (219.0f/255.0f), 0.05f);             // Set the circle fill color to GREEN
CGContextSetRGBStrokeColor  (contextRef, 0.0, 0.0, 0.0, 0.2);           // Set the circle border color to BLACK     
CGContextFillEllipseInRect      (contextRef, rect);                 // Fill the circle with the fill color
CGContextStrokeEllipseInRect    (contextRef, rect);                 // Draw the circle border

// Draw Inner Circle

rect = CGRectMake(25.0, 60.0, 270.0, 270.0);                        // Get the contextRef
CGContextSetLineWidth       (contextRef, 0.5);                  // Set the border width
CGContextSetRGBFillColor    (contextRef, (219.0f/255.0f), (219.0f/255.0f), (219.0f/255.0f), 0.25f);
CGContextSetRGBStrokeColor  (contextRef, 0.0, 0.0, 0.0, 0.2);           // Set the circle border color to BLACK     
CGContextFillEllipseInRect      (contextRef, rect);                 // Fill the circle with the fill color
CGContextStrokeEllipseInRect    (contextRef, rect);     

// Draw Segments

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0.0, 0.0);           
    for (x=1; x<26; x++) {  

        CGContextSetLineWidth       (context, 0.5);
        CGContextSetRGBStrokeColor  (context, 0.0, 0.0, 0.0, 0.25);
        CGContextMoveToPoint        (context, 160, 200);                
        CGContextAddLineToPoint     (context, (160.0 * (cos((x*14.4)*(M_PI/180)))), (160.0 * (sin((x*14.4)*(M_PI/180)))));                      //  The angle is in degrees
        CGContextAddLineToPoint     (context, 200, 65);
        CGContextAddLineToPoint     (context, 160, 200);            
        CGContextStrokePath(context);                           // Why is this not showing both line color and infill?
        CGContextSetFillColorWithColor   (context, [UIColor whiteColor].CGColor);       
        CGContextFillPath           (context);
        CGContextRef context = UIGraphicsGetCurrentContext();
    }           

(I intended to post an image here but it won't permit me!)

Can someone please correct my trig functions. This is meant to draw 25 lines clockwise from 12:00 o'clock to 24:00. Instead it draws backwards only 90 degrees then returns, all lines are way out in length also.

Very grateful

Above is a bigger sample of the code used to draw tow outer circles and the interior segments as requested. I'll try and upload the image next.

Answer 1

Your main problem is this line of code:

CGContextAddLineToPoint(context, (160.0 * (cos((x*14.4)*(M_PI/180)))), 
                                (160.0 * (sin((x*14.4)*(M_PI/180)))));

it should be:

CGContextAddLineToPoint(context, 160 + (160.0 * (cos((x*14.4)*(M_PI/180)))), 
                                200 + (160.0 * (sin((x*14.4)*(M_PI/180)))));

As you had originally written it the lines were be drawn relative to 0,0 but you want to draw relative to your center point (160, 200).

The next 2 lines are also a little suspect:

        CGContextAddLineToPoint     (context, 200, 65);
        CGContextAddLineToPoint     (context, 160, 200);

It is not clear to me what you were trying to do here, but this would end up drawing a line from the end of each arm to a fixed point (200,65) and from there back to you center point, which is almost certainly not what you intended! Try commenting out these lines, confirm that the "arms" are being drawn correctly and take it from there...

Hope this is clear

If you make these corrections your screen will look something like this: