Creating a Circle With Arcs, Using UIBezierPath (Images Included)

Question

I'm using SpriteKit and trying to achieve the following effect using arcs

I created three SKShapeNodes and assigned UIBezierPath's CGPath property to the SKShapeNode's path property.. Here is my code:

func createCircle(){

    //container contains the SKShapeNodes
    self.container = SKShapeNode()
    self.container.position = CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2)

    //creating UIBezierPaths

    let arc = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI/2) , clockwise: false)
    arc.flatness = 100
    self.red = SKShapeNode()
    self.red.lineWidth = 20
    self.red.strokeColor = SKColor.redColor()
    self.red.path = arc.CGPath


    let arc1 = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: CGFloat(M_PI/2), endAngle: CGFloat(0.0), clockwise: false)
    self.blue = SKShapeNode()
    self.blue.strokeColor = SKColor.whiteColor()
    self.blue.lineWidth = 20
    self.blue.path = arc1.CGPath


    let arc2 = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: 0.1, endAngle: CGFloat(3*M_PI/2), clockwise: false)
    self.yellow = SKShapeNode()
    self.yellow.strokeColor = SKColor.yellowColor()
    self.yellow.lineWidth = 20
    self.yellow.path = arc2.CGPath


    //adding arcs to the container
    self.container.addChild(red)
    self.container.addChild(yellow)
    self.container.addChild(blue)


    //adding container to the GameScene
    self.addChild(container)
   }

After experimenting with the startAngle and endAngle I was able to make this:

The code output shape is not identical to the circle I want to create. How can I get the gaps that are in the desired effect image?

Answer 1

Using this image as a reference I was able to make changes to startAngle and endAngleof UIBezierPath arc method Result Image