drawRect - Draw Star

Question

I am drawing annotations on a view. The approach i am using to draw star is below.

-(void)drawRect:(CGRect)rect {

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGFloat xCenter = rect.size.width / 2;
CGFloat yCenter = rect.size.height / 2;

float width;
if(rect.size.width > rect.size.height) {
    width = rect.size.height;
} else {
    width = rect.size.width;
}

double r = width / 2.0;
float flip = -1.0;

double theta = 2.0 * M_PI * (2.0 / 5.0); // 144 degrees

CGContextMoveToPoint(context, xCenter, r*flip+yCenter);

for (NSUInteger k=1; k<5; k++)
{
    float x = r * sin(k * theta);
    float y = r * cos(k * theta);
    CGContextAddLineToPoint(context, x+xCenter, y*flip+yCenter);
}

CGContextSetStrokeColorWithColor(context, self.color.CGColor);

CGContextClosePath(context);
CGContextStrokePath(context);

}

I want to have just borders of star removing other inner lines is there any way to achieve that? (apart from using moveToPoint and addLine methods)

Answer 1

use this code:

-(void)drawRect:(CGRect)rect
{
    int aSize = 100.0;
    float color[4] = { 0.0, 0.0, 1.0, 1.0 }; // Blue
    CGColorRef aColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), color);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, aSize);
    CGFloat xCenter = 100.0;
    CGFloat yCenter = 100.0;

    float  w = 100.0;
    double r = w / 2.0;
    float flip = -1.0;

    CGContextSetFillColorWithColor(context, aColor);


    CGContextSetStrokeColorWithColor(context, aColor);

    double theta = 2.0 * M_PI * (2.0 / 5.0); // 144 degrees

    CGContextMoveToPoint(context, xCenter, r*flip+yCenter);

    for (NSUInteger k=1; k<5; k++) 
    {
        float x = r * sin(k * theta);
        float y = r * cos(k * theta);
        CGContextAddLineToPoint(context, x+xCenter, y*flip+yCenter);
    }

    CGContextClosePath(context);
    CGContextFillPath(context);
    }

This will create 1 blue star

Answer 2

You can draw star by using this code:

UIBezierPath* starPath = UIBezierPath.bezierPath;
 [starPath moveToPoint: CGPointMake(90, 31)];
[starPath addLineToPoint: CGPointMake(98.11, 42.06)];
[starPath addLineToPoint: CGPointMake(111.87, 45.86)];
[starPath addLineToPoint: CGPointMake(103.12, 56.49)];
[starPath addLineToPoint: CGPointMake(103.52, 69.89)];
[starPath addLineToPoint: CGPointMake(90, 65.4)];
[starPath addLineToPoint: CGPointMake(76.48, 69.89)];
[starPath addLineToPoint: CGPointMake(76.88, 56.49)];
[starPath addLineToPoint: CGPointMake(68.13, 45.86)];
[starPath addLineToPoint: CGPointMake(81.89, 42.06)];
[starPath closePath];
[UIColor.grayColor setFill];
[starPath fill];

Answer 3

With use of the UIBezierPath you can work with that in Swift 4.

let polygonPath = UIBezierPath()

let xCenter: CGFloat = 0
let yCenter: CGFloat = 0

let w = CGFloat(300)
let r = w / 2.0
let flip: CGFloat = -1.0 // use this to flip the figure 1.0 or -1.0

let polySide = CGFloat(5)

let theta = 2.0 * Double.pi * Double(2.0 / polySide)

polygonPath.move(to: CGPoint(x: xCenter, y: r * flip + yCenter))

for i in 1..<Int(polySide) {
    let x: CGFloat = r * CGFloat( sin(Double(i) * theta) )
    let y: CGFloat = r * CGFloat( cos(Double(i) * theta) )
    polygonPath.addLine(to: CGPoint(x: x + xCenter, y: y * flip + yCenter))
}

polygonPath.close()