CODEWITHSUNDEEP
ioscore-graphics
jjxtra
jjxtra

Reputation: 21140

Draw a feathered circle with core graphics

Using core graphics, how would I draw a feathered circle with increasing alpha values towards the center? Something like this:

enter image description here

Ideally the color, circle radius and alpha intensity would be parameters.

Upvotes: 0

Views: 273

Answers (2)

Art
Art

Reputation: 36

This has worked for me in some of my apps. Softness is 0-1. You'll need to make a CGBitmapContext yourself with width and height of width (a square).

// make a path:
self.shapePath = CGPathCreateMutable();
CGPathAddEllipseInRect(self.shapePath, NULL, CGRectMake(0, 0, width, width));
CGFloat radius = width / 2.0f;        
NSInteger innerRadius = (softness < 0.01f ? (NSInteger)radius : (NSInteger)ceil((1.0f - softness) * radius));
NSInteger outerRadius = (NSInteger)ceil(radius);
CGFloat alphaStep = MAX(0.0059f, (1.0f / ((outerRadius - innerRadius) + 1)));
CGFloat outerMultiplier = 1.0f / (2.0f * (CGFloat)outerRadius);

for (NSInteger i = outerRadius; i >= innerRadius; --i)
{
    CGContextSaveGState(bitmapContext);
    UIColor* c = [UIColor.whiteColor colorWithAlphaComponent:alphaStep];
    CGContextTranslateCTM(bitmapContext, outerRadius - i, outerRadius - i);
    CGFloat scale = (2.0f * (CGFloat)i) * outerMultiplier;
    CGContextScaleCTM(bitmapContext, scale, scale);
    CGContextSetFillColorWithColor(bitmapContext, c.CGColor);
    CGContextAddPath(bitmapContext, self.shapePath);
    CGContextEOFillPath(bitmapContext);
    CGContextRestoreGState(bitmapContext);
}

Upvotes: 2

Duncan C
Duncan C

Reputation: 131418

You can use the Core Graphics CGGradientRef and the CGContextDrawRadialGradient() function, or you can use the Core image CIRadialGradient filter. Which one you use depends on your needs.

Upvotes: 1

Related Questions