Draw 16 dots in Circular path with CGContextRef

Question

How can I add 16 dot in circular path when the user select a location x,y in my View and the dots should be in a equal distances,

so when the user hit a location in the view, I will complete the circle with 16 dot, see attachment.

enter image description here

the image is the use from this code:

CGPoint CenterPoint = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
CGPoint Point;
float Angel = 360/16;

for (int i = 0 ; i < 16;i++)
{
    float distance = [self distanceFrom:newPoint to:centerPoint];
    Point.x = CenterPoint.x + distance * cos(Angel);
    Point.y = CenterPoint.y + distance * sin(Angel);

    CGContextMoveToPoint(cacheContext, Point.x, Point.y);
    CGContextAddLineToPoint(cacheContext, Point.x, Point.y);
    CGContextStrokePath(cacheContext);

    Angel+= 10;
}

Yes, trig is involved. Take a looky here http://www.mathsisfun.com/polar-cartesian-coordinates.html you know the radius (once you have selected a centre point and you know the angle. You just need to move round the circle converting from polar to cartesian coordinates. — Fogmeister, Feb 12 '13 at 08:12
Just FYI: *angel* is the celestial do-gooder (usually with wings and a halo), and *angle* is the space between two intersecting lines. — dreamlax, Feb 12 '13 at 10:08

score 0 · Answer 1 · answered Feb 12 '13 at 08:25

Check the below code it may help you little

int startAngle = 0;

while (startAngle < 360)
{
    CAShapeLayer *slice = [CAShapeLayer layer];
    slice.fillColor = _buttonColor.CGColor;
    slice.strokeColor = [UIColor clearColor].CGColor;
    slice.lineWidth = 3.0;

    CGFloat angle = DEGREES_TO_RADIANS(-60.0);
    CGPoint center = CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0);
    CGFloat radius = self.frame.size.width/2.0;

    UIBezierPath *piePath = [UIBezierPath bezierPath];
    [piePath moveToPoint:center];

    //[piePath addLineToPoint:CGPointMake(center.x + radius * cosf(DEGREES_TO_RADIANS(startAngle)), center.y + radius * sinf(DEGREES_TO_RADIANS(startAngle)))];

    [piePath addArcWithCenter:center radius:radius startAngle:DEGREES_TO_RADIANS(startAngle) endAngle:DEGREES_TO_RADIANS(startAngle + 63) clockwise:YES];

    //   [piePath addLineToPoint:center];
    [piePath closePath]; // this will automatically add a straight line to the center
    slice.path = piePath.CGPath;

    startAngle += (360/15);

    [self.layer addSublayer:slice];
}

Thanks for this answer but this draws a full circle not only dots. — Aziz, Feb 12 '13 at 08:49
Do you have to draw only dots or you have to connect those dots also? — Exploring, Feb 13 '13 at 05:36
No, just dots without connecting those dots, but I've managed to do it finally, I'll post the answer today, thanks alot for the help. — Aziz, Feb 13 '13 at 08:53

score 0 · Answer 2 · answered Feb 12 '13 at 10:14

The cos and sin functions expect the angle in radians and not degrees (which you are providing). Try this alternative approach instead.

float distance = [self distanceFrom:newPoint to:centerPoint];
CGContextSaveGState(cacheContext);
CGContextTranslateCTM(cacheContext, CenterPoint.x, CenterPoint.y);

for (int i = 0 ; i < 16;i++)
{
    float angle = i * (M_2_PI / 16);
    CGPoint pt = CGPointMake(distance * cos(angle), distance * sin(angle));

    CGContextMoveToPoint(cacheContext, 0, 0);
    CGContextAddLineToPoint(cacheContext, pt.x, pt.y);
    CGContextStrokePath(cacheContext);
}
CGContextRestoreGState(cacheContext);

This approach translates the context so that the origin (a.k.a centre-point) really is the CenterPoint so you don't need to worry about adding CenterPoint to anything. Since distance is not affected by anything inside the loop, it should be moved out so that it is not recalculated unnecessarily.

Draw 16 dots in Circular path with CGContextRef

2 Answers2