Search code examples
iphoneioscore-graphics

draw outer half circle with gradient using core graphics in iOS?


i want to draw a shape like in the attached image using core graphics in iOS. Is this possible. Please provide sample code if it possible. enter image description here

I want at least 3 color gradient over the shape.


Solution

  • If you want to draw this in a CGContext:

    Use +[UIBezierPath bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:] to create a path containing a semi-circular arc. Then use CGPathCreateCopyByStrokingPath to create an enclosed shape around the arc. Use CGContextAddPath to add this enclosed shape to your context's path, then use CGContextClip to set the clip region to the thick arc.

    Use CGGradientCreateWithColors to create a CGGradient with your rainbow colors. Use CGContextDrawLinearGradient to fill the clip region with the gradient.

    If you want to draw this using a CALayer:

    Create a CAGradientLayer. Set the layer's colors property to your rainbow of colors. Set the layer's startPoint to (0,0) and the layer's endPoint to (1,0).

    Create a CAShapeLayer and set it as the gradient layer's mask. Use +[UIBezierPath bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:] and CGPathCreateCopyByStrokingPath to create a path enclosing the thick arc, and set this path as the shape layer's path.