¿Hay alguna manera de dibujar un CGContextDrawRadialGradient como un óvalo en lugar de un círculo perfecto?

Question

Necesito un degradado radial en forma de óvalo o elipse y parece que CGContextDrawRadialGradient solo puede dibujar un círculo perfecto. He estado dibujando en un contexto cuadrado y luego copiando/dibujando en un contexto rectangular.

¿Alguna mejor manera de hacer esto?

Gracias!

Answer 1

Puede cambiar la transformación del contexto para dibujar una elipse (por ejemplo, aplicar CGContextScaleCTM (contexto, 2.0, 1.0) justo antes de llamar CGContextDrawRadialGradient() para dibujar un gradiente elíptica que es el doble de ancha que de alta). Pero recuerda aplicar la transformación inversa a tus puntos de inicio y final.

Answer 2

La única manera que he encontrado para hacer esto es como sugirió Mark F, pero creo que la respuesta necesita un ejemplo para ser más fácil de entender.

Dibuje un gradiente elíptica en una vista en IOS (y usando ARC):

- (void)drawRect:(CGRect)rect { 

    CGContextRef ctx = UIGraphicsGetCurrentContext(); 

    // Create gradient 
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
    CGFloat locations[] = {0.0, 1.0}; 

    UIColor *centerColor = [UIColor orangeColor]; 
    UIColor *edgeColor = [UIColor purpleColor]; 

    NSArray *colors = [NSArray arrayWithObjects:(__bridge id)centerColor.CGColor, (__bridge id)edgeColor.CGColor, nil]; 
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, locations); 

    // Scaling transformation and keeping track of the inverse 
    CGAffineTransform scaleT = CGAffineTransformMakeScale(2, 1.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); 

    // Transform center and radius of gradient with the inverse 
    CGPoint center = CGPointMake((self.bounds.size.width/2) * invS.x, (self.bounds.size.height/2) * invS.y); 
    CGFloat radius = (self.bounds.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); 
    CGColorSpaceRelease(colorSpace); 
} 

Ponga en una vista con un fondo negro que se obtiene: