Core Graphics AddQuadCureToPoint from Center of View/Circle

Question

What I am trying to accomplish is drawing curved lines from a center of a view. So far with the help of much googling and this site...I've accomplished the image below.

http://www.flickr.com/photos/57562417@N00/9100635690/

What I would like to do is have curved lines like the following image...

http://www.flickr.com/photos/57562417@N00/9100634674/

Any and all help would be appreciated. I've included the code thus far.

    #import <UIKit/UIKit.h>

    @interface ChartView : UIView

    @property (nonatomic,assign) int angle;

    @end

    ----------------------------------------------------------------------



    #import "ChartView.h"
    #import <QuartzCore/QuartzCore.h>

    /** Helper Functions **/
    #define degree_to_radians(deg)      ( (M_PI * (deg)) / 180.0 )
    #define radians_to_degrees(rad)     ( (180.0 * (rad)) / M_PI )


    @interface ChartView(){

    int radius;
    }

    @end

    @implementation ChartView

    -(id)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];

         if(self){



    self.backgroundColor = [UIColor whiteColor];
    [self.layer setBorderWidth:1.0];
    [self.layer setBorderColor:[UIColor redColor].CGColor];

    //Define the circle radius taking into account the safe area
    radius = self.frame.size.width/2;

    //Initialize the Angle at 0
    self.angle = 360;
 }

  return self;

}

-(void)drawRect:(CGRect)rect{

//Circle center

int numberOfSections = 96; //24 major lines
CGFloat angleSize = 2 * M_PI/numberOfSections;

CGContextRef context = UIGraphicsGetCurrentContext();

//draw the main outside circle
CGRect circleRect = CGRectMake(0.0, 0.0, 720., 720.);
CGContextSetLineWidth(context, .5);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
CGContextStrokeEllipseInRect(context, circleRect);
CGPoint centerPoint = CGPointMake(circleRect.size.width/2 , circleRect.size.height/2);

//setup for drawing lines from center, straight lines, need curved lines
CGContextTranslateCTM(context, 0.0, 0.0);

for (int x = 0; x < numberOfSections; x++) {

    CGContextSetLineWidth(context, .5);
    CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
    CGContextMoveToPoint(context, self.frame.size.width/2, self.frame.size.height/2);

    CGContextAddLineToPoint(context, centerPoint.x + radius * cos(angleSize * x) ,centerPoint.y + radius * sin(angleSize * x));



    CGContextStrokePath(context);

}



CGContextSetLineWidth(context, .5);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
CGContextSetRGBFillColor(context, 1., 1., 1., 1.0);

//Taken from Hypnotizer code
float maxRadius = 360.0;
CGContextSetLineWidth(context, 0.5f);
CGContextSetRGBStrokeColor(context,  0.0, 2.0, 4.0, 1.0);

//need to add 100 lines form a certain radius to a max radius
for (float currentRadius = maxRadius; currentRadius > 99; currentRadius -=2.6) {


    CGContextAddArc(context, centerPoint.x, centerPoint.y, currentRadius, 0.0, M_PI * 2.0, YES);
    CGContextStrokePath(context);
}



}

@end

Answer 1

Alright, I've got some code for you that I tried out and does the curved line effect you mentioned in that second picture:

- (void)drawRect:(CGRect)rect {
    radius = self.frame.size.width / 2;

    // Circle center
    int numberOfSections = 96; // 24 major lines
    CGFloat angleSize = 2 * M_PI/ numberOfSections;

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGRect circleRect = CGRectMake(0.0, 0.0, 720., 720.);
    CGPoint centerPoint = CGPointMake(circleRect.size.width / 2, circleRect.size.height / 2);

    /* Create mask to create 'hole' in the center */
    CGContextAddArc(context, centerPoint.x, centerPoint.y, 720 / 2.0, 0.0, M_PI * 2.0, YES);
    CGContextAddArc(context, centerPoint.x, centerPoint.y, 100, 0.0, M_PI * 2.0, NO);
    CGContextClip(context);

    // draw the main outside circle
    CGContextSetLineWidth(context, .5);
    CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
    CGContextStrokeEllipseInRect(context, circleRect);

    // setup for drawing lines from center, straight lines, need curved lines
    CGContextTranslateCTM(context, 0.0, 0.0);

    for (int x = 0; x < numberOfSections; x++) {

        CGContextSetLineWidth(context, .5);
        CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);

        double angle = angleSize * x;
        CGPoint outsidePoint = CGPointMake(centerPoint.x + radius * cos(angle), centerPoint.y + radius * sin(angle));
        CGPoint control1 = CGPointMake(centerPoint.x + radius/3 * cos(angle-0.5), centerPoint.y + radius/3 * sin(angle-0.5));
        CGPoint control2 = CGPointMake(centerPoint.x + (2*radius/3) * cos(angle-0.5), centerPoint.y + (2*radius/3) * sin(angle-0.5));

        UIBezierPath *bezierPath = [UIBezierPath bezierPath];
        [bezierPath moveToPoint:CGPointMake(circleRect.size.width / 2, circleRect.size.height / 2)];
        [bezierPath addCurveToPoint:outsidePoint controlPoint1:control1 controlPoint2:control2];
        CGContextAddPath(context, bezierPath.CGPath);


        CGContextStrokePath(context);

    }


    CGContextSetLineWidth(context, .5);
    CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
    CGContextSetRGBFillColor(context, 1., 1., 1., 1.0);

    // Taken from Hypnotizer code
    float maxRadius = 360.0;
    CGContextSetLineWidth(context, 0.5f);
    CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);

    // need to add 100 lines form a certain radius to a max radius
    for (float currentRadius = maxRadius; currentRadius > 99; currentRadius -= 2.6) {


        CGContextAddArc(context, centerPoint.x, centerPoint.y, currentRadius, 0.0, M_PI * 2.0, YES);
        CGContextStrokePath(context);
    }

}