How to make star shape with bezier path in ios?

Question

I am working with Bezier path and making simple shapes with it. What is the process for making a star shape using Bezier paths?

Answer 1

Try this path:

//// Star Drawing
UIBezierPath* starPath = [UIBezierPath bezierPath];
[starPath moveToPoint: CGPointMake(45.25, 0)];
[starPath addLineToPoint: CGPointMake(61.13, 23)];
[starPath addLineToPoint: CGPointMake(88.29, 30.75)];
[starPath addLineToPoint: CGPointMake(70.95, 52.71)];
[starPath addLineToPoint: CGPointMake(71.85, 80.5)];
[starPath addLineToPoint: CGPointMake(45.25, 71.07)];
[starPath addLineToPoint: CGPointMake(18.65, 80.5)];
[starPath addLineToPoint: CGPointMake(19.55, 52.71)];
[starPath addLineToPoint: CGPointMake(2.21, 30.75)];
[starPath addLineToPoint: CGPointMake(29.37, 23)];
[starPath closePath];
[UIColor.redColor setStroke];
starPath.lineWidth = 1;
[starPath stroke];

You can use Paint Code app to draw shape for iOS and OSX. This is easy to use and very helpful app.

Happy Coding.

Answer 2

I think this is what you are looking for:

func starPathInRect(rect: CGRect) -> UIBezierPath {
    let path = UIBezierPath()

    let starExtrusion:CGFloat = 30.0

    let center = CGPointMake(rect.width / 2.0, rect.height / 2.0)

    let pointsOnStar = 5 + arc4random() % 10

    var angle:CGFloat = -CGFloat(M_PI / 2.0)
    let angleIncrement = CGFloat(M_PI * 2.0 / Double(pointsOnStar))
    let radius = rect.width / 2.0

    var firstPoint = true

    for i in 1...pointsOnStar {

        let point = pointFrom(angle, radius: radius, offset: center)
        let nextPoint = pointFrom(angle + angleIncrement, radius: radius, offset: center)
        let midPoint = pointFrom(angle + angleIncrement / 2.0, radius: starExtrusion, offset: center)

        if firstPoint {
            firstPoint = false
            path.moveToPoint(point)
        }

        path.addLineToPoint(midPoint)
        path.addLineToPoint(nextPoint)

        angle += angleIncrement
    }

    path.closePath()

    return path
}

This Function let you decide How many points you want in your stars..

Check this link for more detailed description.

Hope this Helps. :) Let me know for any query..!!!

Answer 3

I upgraded algorithm of @Sneha. This is how you can use it:

rect = CGRect(x: 0, y: 0, width: 15, height: 15)
path.addStar(rect: rect, extrusion: 20, points: 5) 
path.close()

And this is the algorithm:

extension CGPoint {
    func pointFrom(angle: CGFloat, radius: CGFloat) -> CGPoint {
        return CGPoint(x: self.x + radius * cos(CGFloat.pi - angle), y: self.y - radius * sin(CGFloat.pi - angle))
    }
}

extension UIBezierPath {
    func addStar(rect: CGRect, extrusion: CGFloat, points: Int) {
        self.move(to: CGPoint(x: 0, y: 0))
        let center = CGPoint(x: rect.width / 2.0, y: rect.height / 2.0)
        var angle:CGFloat = -CGFloat.pi / 2.0
        let angleIncrement = CGFloat.pi * 2.0 / CGFloat(points)
        let radius = rect.width / 2.0
        var firstPoint = true
        for _ in 1...points {
            let point = center.pointFrom(angle: angle, radius: radius)
            let nextPoint = center.pointFrom(angle: angle + angleIncrement, radius: radius)
            let midPoint = center.pointFrom(angle: angle + angleIncrement / 2.0, radius: extrusion)
            if firstPoint {
                firstPoint = false
                self.move(to: point)
            }
            self.addLine(to: midPoint)
            self.addLine(to: nextPoint)
            angle += angleIncrement
            }
    }