Draw ellipse gradient

Question

How can I draw an image like below? I created this one in a photo editing tool. But can't really pull it off with iOS.

• Ellipse
• "Soft corners", in a way it's like a radiant gradient only that it's not circular.

https://stackoverflow.com/a/12665177/129202 lead me in a good direction but really the effect of the affine transformation is not 100%.

Code used:

+(UIImage*)createGradientOval2:(const CGSize)SIZECONTEXT {
    const CGFloat SCALE = 2.0f;
    UIGraphicsBeginImageContextWithOptions(SIZECONTEXT, NO, SCALE);
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // Create gradient
    CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();

    const CGFloat colors [] = {
        0.0, 1.0, 0.0, 1.00, // green
        0.0, 1.0, 0.0, 1.00, // green
        0.0, 1.0, 0.0, 1.00, // green
        0.0, 1.0, 0.0, 1.00, // green
        0.0, 1.0, 0.0, 1.00, // green
        0.0, 1.0, 0.0, 1.00, // green
        0.0, 1.0, 0.0, 1.00, // green
        0.0, 1.0, 0.0, 1.00, // green
        0.0, 1.0, 0.0, 1.00, // green
        0.0, 1.0, 0.0, 0.00, // transparent
    };
    //CGGradientRef gradient = CGGradientCreateWithColors(baseSpace, (CFArrayRef)colors, locations);
    CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 10);
    CGColorSpaceRelease(baseSpace), baseSpace = NULL;

    // Scaling transformation and keeping track of the inverse
    CGAffineTransform scaleT = CGAffineTransformMakeScale(1, 2.0);
    CGAffineTransform invScaleT = CGAffineTransformInvert(scaleT);

    // Extract the Sx and Sy elements from the inverse matrix
    // (See the Quartz documentation for the math behind the matrices)
    CGPoint invS = CGPointMake(invScaleT.a, invScaleT.d);

    const CGRect RECT = CGRectMake(0, 0, SIZECONTEXT.width / 2, SIZECONTEXT.height / 2);

    // Transform center and radius of gradient with the inverse
    CGPoint center = CGPointMake((RECT.size.width / 2) * invS.x, (RECT.size.height / 2) * invS.y);
    CGFloat radius = (RECT.size.width / 2) * invS.x;

    // Draw the gradient with the scale transform on the context
    CGContextScaleCTM(ctx, scaleT.a, scaleT.d);
    CGContextDrawRadialGradient(ctx, gradient, center, 0, center, radius, kCGGradientDrawsBeforeStartLocation);

    // Reset the context
    CGContextScaleCTM(ctx, invS.x, invS.y);

    // Continue to draw whatever else ...

    // Clean up the memory used by Quartz
    CGGradientRelease(gradient);

    return UIGraphicsGetImageFromCurrentImageContext();
}

Answer 1

OK I got a new one... It's a lot better I think. The smoothness and so on is hardcoded in STROKECOUNT, MAXSTROKEWIDTH etc. This actually makes the oval grow a little bit outwards. It would need some tweaking to force staying inside the oval rect.

+(UIImage*)ellipseWithSmoothEdges:(const CGSize)SIZECONTEXT oval:(const CGRect)RECTFOROVAL {
    const CGFloat SCALE = 2.0f;

    UIColor* colorPaint = [UIColor greenColor];

    UIGraphicsBeginImageContextWithOptions(SIZECONTEXT, NO, SCALE);
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIBezierPath* pathEllipseForClippingto = [UIBezierPath bezierPathWithOvalInRect:RECTFOROVAL];
    const int STROKECOUNT = 70;
    const CGFloat BASEALPHA = 1.0f / (CGFloat)STROKECOUNT;
    const CGFloat MAXSTROKEWIDTH = 50;
    UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect:RECTFOROVAL];

    CGContextSaveGState(context); {
        [pathEllipseForClippingto addClip];
        [colorPaint setFill];
        [path fill];
        CGContextRestoreGState(context);
    }
    for (int i = 0; i < STROKECOUNT; i++) {
        [[UIColor colorWithRed:0 green:1 blue:0 alpha:BASEALPHA * i] setStroke];
        path.lineWidth = MAXSTROKEWIDTH - i;
        [path stroke];
    }

    UIImage* imageGenerated = UIGraphicsGetImageFromCurrentImageContext();

    return imageGenerated;
}