UIBezierPath rotate around a point within the circle itself, swift and SpriteKit

Question

I set a circle with 4 even sectors using the following code:

func centerCircle() {

    let center = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame))
    // node1
    let node1bezierPath = UIBezierPath()
    node1bezierPath.addArcWithCenter(center, radius: 100, startAngle: 0.78, endAngle: 2.35, clockwise: true)
    node1bezierPath.addLineToPoint(center)

    let node1 = SKShapeNode(path: node1bezierPath.CGPath)
    node1.strokeColor = SKColor.redColor()
    node1.fillColor = SKColor.redColor()
    self.addChild(node1)
    // node2
    let node2bezierPath = UIBezierPath()
    node2bezierPath.addArcWithCenter(center, radius: 100, startAngle: 2.35, endAngle: 3.92, clockwise: true)
    node2bezierPath.addLineToPoint(center)

    let node2 = SKShapeNode(path: node2bezierPath.CGPath)
    node2.strokeColor = SKColor.blueColor()
    node2.fillColor = SKColor.blueColor()
    self.addChild(node2)
    // node3
    let node3bezierPath = UIBezierPath()
    node3bezierPath.addArcWithCenter(center, radius: 100, startAngle: 3.92, endAngle: 5.48, clockwise: true)
    node3bezierPath.addLineToPoint(center)

    let node3 = SKShapeNode(path: node3bezierPath.CGPath)
    node3.strokeColor = SKColor.greenColor()
    node3.fillColor = SKColor.greenColor()
    self.addChild(node3)
    // node4
    let node4bezierPath = UIBezierPath()
    node4bezierPath.addArcWithCenter(center, radius: 100, startAngle: 5.48, endAngle: 0.78, clockwise: true)
    node4bezierPath.addLineToPoint(center)

    let node4 = SKShapeNode(path: node4bezierPath.CGPath)
    node4.strokeColor = SKColor.yellowColor()
    node4.fillColor = SKColor.yellowColor()
    self.addChild(node4)

}

What I want to achieve is this circle will rotate around its center by 90 degrees when I tap on the screen.

center = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame))

I tried to set the centerCircle() -> SKSpriteNode, and add a SKAction.rotateByAngle, it is not working. And I searched some other posts on StackOverflow, no luck getting it to work either. Any ideas how I can get it working? Thanks a lot.

rakeshbs rakeshbs · Accepted Answer · 2015-04-09T08:53:18

You can add the SKShapeNodes to a SKNode and then rotate the SKNode. For example, you can create a custom class of SKNode like this

class FourColorCircle : SKNode {

    override init() {
        super.init()
        self.createCircle()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    func createCircle () {
        let center = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame))
        // node1
        let node1bezierPath = UIBezierPath()
        node1bezierPath.addArcWithCenter(center, radius: 100, startAngle: 0.78, endAngle: 2.35, clockwise: true)
        node1bezierPath.addLineToPoint(center)

        let node1 = SKShapeNode(path: node1bezierPath.CGPath)
        node1.strokeColor = SKColor.redColor()
        node1.fillColor = SKColor.redColor()
        self.addChild(node1)
        // node2
        let node2bezierPath = UIBezierPath()
        node2bezierPath.addArcWithCenter(center, radius: 100, startAngle: 2.35, endAngle: 3.92, clockwise: true)
        node2bezierPath.addLineToPoint(center)

        let node2 = SKShapeNode(path: node2bezierPath.CGPath)
        node2.strokeColor = SKColor.blueColor()
        node2.fillColor = SKColor.blueColor()
        self.addChild(node2)
        // node3
        let node3bezierPath = UIBezierPath()
        node3bezierPath.addArcWithCenter(center, radius: 100, startAngle: 3.92, endAngle: 5.48, clockwise: true)
        node3bezierPath.addLineToPoint(center)

        let node3 = SKShapeNode(path: node3bezierPath.CGPath)
        node3.strokeColor = SKColor.greenColor()
        node3.fillColor = SKColor.greenColor()
        self.addChild(node3)
        // node4
        let node4bezierPath = UIBezierPath()
        node4bezierPath.addArcWithCenter(center, radius: 100, startAngle: 5.48, endAngle: 0.78, clockwise: true)
        node4bezierPath.addLineToPoint(center)

        let node4 = SKShapeNode(path: node4bezierPath.CGPath)
        node4.strokeColor = SKColor.yellowColor()
        node4.fillColor = SKColor.yellowColor()
        self.addChild(node4)

    }

    func rotate(angle : CGFloat, animated : Bool) {
        var rotateAction : SKAction!

        if animated {
            rotateAction = SKAction.rotateByAngle(angle, duration: 0.6)
        }
        else {
            rotateAction = SKAction.rotateByAngle(angle, duration: 0)
        }

        self.runAction(rotateAction)
    }
}

Then you can use it like this,

let circle = FourColorCircle()
addChild(circle)
circle.position = CGPointMake(200, 200)
circle.rotate(3.14/2, animated: true)

UIBezierPath rotate around a point within the circle itself, swift and SpriteKit

1 Answers