Draw empty Circle with multiple colors on border Swift SpriteKit

Solutions Collect From Internet About “Draw empty Circle with multiple colors on border Swift SpriteKit”

Easier way would be to do this thing in photoshop and use that image in the view.

To draw circle with multiple colors, you need to have multiple bezier paths.

I tried to draw a four colored circle with bezier path.I couldnt get the perfect circle cut.

enter image description here

- (void)drawRect: (CGRect)frame
{
    //// Color Declarations
    UIColor* color2 = [UIColor colorWithRed: 0.062 green: 0.416 blue: 0.888 alpha: 1];
    UIColor* color3 = [UIColor colorWithRed: 0.768 green: 0.09 blue: 0.09 alpha: 1];
    UIColor* color4 = [UIColor colorWithRed: 0.109 green: 0.853 blue: 0.145 alpha: 1];

    //// Bezier Drawing
    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [UIColor.redColor setStroke];
    bezierPath.lineWidth = 2;
    [bezierPath stroke];

     SKShapeNode *sBezierPath = [SKShapeNode shapeNodeWithPath: bezierPath.CGPath];
     [self addChild: sBezierPath];
    //// Bezier 4 Drawing
    UIBezierPath* bezier4Path = [UIBezierPath bezierPath];
    [bezier4Path moveToPoint: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5)];
    [bezier4Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 17.5, CGRectGetMinY(frame) + 77.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 7.75, CGRectGetMinY(frame) + 68.5)];
    [bezier4Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 27.25, CGRectGetMinY(frame) + 86.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5)];
    [UIColor.blackColor setStroke];
    bezier4Path.lineWidth = 1;
    [bezier4Path stroke];

   SKShapeNode *sBezier4Path = [SKShapeNode shapeNodeWithPath: bezier4Path.CGPath];
     [self addChild: sBezier4Path];

    //// Bezier 5 Drawing
    UIBezierPath* bezier5Path = [UIBezierPath bezierPath];
    [bezier5Path moveToPoint: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5)];
    [bezier5Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 58.37, CGRectGetMinY(frame) + 89.05) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 52.71, CGRectGetMinY(frame) + 89.12)];
    [bezier5Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 81.5, CGRectGetMinY(frame) + 81.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 65.65, CGRectGetMinY(frame) + 88.95) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 75.31, CGRectGetMinY(frame) + 86.7)];
    [bezier5Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 92.5, CGRectGetMinY(frame) + 72.25) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5)];
    [color2 setStroke];
    bezier5Path.lineWidth = 1;
    [bezier5Path stroke];

    SKShapeNode *sBezier5Path = [SKShapeNode shapeNodeWithPath: bezier5Path.CGPath];
     [self addChild: sBezier5Path];

    //// Bezier 2 Drawing
    UIBezierPath* bezier2Path = [UIBezierPath bezierPath];
    [bezier2Path moveToPoint: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5)];
    [bezier2Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 22.5, CGRectGetMinY(frame) + 22.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 12.25, CGRectGetMinY(frame) + 30.5)];
    [bezier2Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 32.75, CGRectGetMinY(frame) + 14.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5)];
    [color4 setStroke];
    bezier2Path.lineWidth = 1;
    [bezier2Path stroke];

     SKShapeNode *sBezier2Path = [SKShapeNode shapeNodeWithPath: bezier2Path.CGPath];
     [self addChild: sBezier2Path];


    //// Bezier 3 Drawing
    UIBezierPath* bezier3Path = [UIBezierPath bezierPath];
    [bezier3Path moveToPoint: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5)];
    [bezier3Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 79.5, CGRectGetMinY(frame) + 24.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 69.25, CGRectGetMinY(frame) + 16)];
    [bezier3Path addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 89.75, CGRectGetMinY(frame) + 33) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5)];
    [color3 setStroke];
    bezier3Path.lineWidth = 1;
    [bezier3Path stroke];

    SKShapeNode *sBezier3Path = [SKShapeNode shapeNodeWithPath: bezier3Path.CGPath];
     [self addChild: sBezier3Path];
}

Swift:

func drawRect(frame: CGRect) {
    //// Color Declarations
    var color2: UIColor = UIColor(red: 0.062, green: 0.416, blue: 0.888, alpha: 1)
    var color3: UIColor = UIColor(red: 0.768, green: 0.09, blue: 0.09, alpha: 1)
    var color4: UIColor = UIColor(red: 0.109, green: 0.853, blue: 0.145, alpha: 1)
    //// Bezier Drawing
    let bezierPath = UIBezierPath()
    var strokeColor: UIColor = UIColor.redColor()
    strokeColor.setStroke()
    bezierPath.lineWidth = 2
    bezierPath.stroke()


    let sBezierPath = SKShapeNode()
    sBezierPath.path=bezierPath.CGPath
    self.addChild(sBezierPath)

    //// Bezier 4 Drawing
    let bezier4Path = UIBezierPath()
    bezier4Path.moveToPoint(CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5))
    bezier4Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 17.5, CGRectGetMinY(frame) + 77.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 7.75, CGRectGetMinY(frame) + 68.5))
    bezier4Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 27.25, CGRectGetMinY(frame) + 86.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5))
    var strokeColor4: UIColor = UIColor.blackColor()
    strokeColor4.setStroke()
    bezier4Path.lineWidth = 1
    bezier4Path.stroke()

    let sBezier4Path = SKShapeNode()
    sBezier4Path.path=bezier4Path.CGPath
    self.addChild(sBezier4Path)

    //// Bezier 5 Drawing
    let bezier5Path = UIBezierPath()
    bezier5Path.moveToPoint(CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5))
    bezier5Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 58.37, CGRectGetMinY(frame) + 89.05), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 48.5, CGRectGetMinY(frame) + 88.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 52.71, CGRectGetMinY(frame) + 89.12))
    bezier5Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 81.5, CGRectGetMinY(frame) + 81.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 65.65, CGRectGetMinY(frame) + 88.95), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 75.31, CGRectGetMinY(frame) + 86.7))
    bezier5Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 92.5, CGRectGetMinY(frame) + 72.25), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5))
    color2.setStroke()
    bezier5Path.lineWidth = 1
    bezier5Path.stroke()

    let sBezier5Path = SKShapeNode()
    sBezier5Path.path=bezier5Path.CGPath
    self.addChild(sBezier5Path)

    //// Bezier 2 Drawing
    let bezier2Path = UIBezierPath()
    bezier2Path.moveToPoint(CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5))
    bezier2Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 22.5, CGRectGetMinY(frame) + 22.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 9.5, CGRectGetMinY(frame) + 50.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 12.25, CGRectGetMinY(frame) + 30.5))
    bezier2Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 32.75, CGRectGetMinY(frame) + 14.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5))
    color4.setStroke()
    bezier2Path.lineWidth = 1
    bezier2Path.stroke()

    let sBezier2Path = SKShapeNode()
    sBezier2Path.path=bezier2Path.CGPath
    self.addChild(sBezier2Path)


    //// Bezier 3 Drawing
    let bezier3Path = UIBezierPath()
    bezier3Path.moveToPoint(CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5))
    bezier3Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 79.5, CGRectGetMinY(frame) + 24.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 50.5, CGRectGetMinY(frame) + 15.5), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 69.25, CGRectGetMinY(frame) + 16))
    bezier3Path.addCurveToPoint(CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5), controlPoint1: CGPointMake(CGRectGetMinX(frame) + 89.75, CGRectGetMinY(frame) + 33), controlPoint2: CGPointMake(CGRectGetMinX(frame) + 91.5, CGRectGetMinY(frame) + 50.5))
    color3.setStroke()
    bezier3Path.lineWidth = 1
    bezier3Path.stroke()

    let sBezier3Path = SKShapeNode()
    sBezier3Path.path=bezier3Path.CGPath
    self.addChild(sBezier3Path)
}