2011-02-03 18 views
5

estoy usando siguiente código para agregar esquinas redondeadas a mi UIImage, pero el problema es que las esquinas redondeadas se muestra el área "blanca" en lugar de transparente o "claro". ¿Qué estoy haciendo mal aquí:UIImage con esquinas redondeadas transparentes

- (UIImage *)makeRoundCornerImageWithCornerWidth:(int)cornerWidth cornerHeight:(int)cornerHeight { 
    UIImage * newImage = nil; 

    if (self != nil) { 
     NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init]; 
     int w = self.size.width; 
     int h = self.size.height; 

     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
     CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst); 

     CGContextBeginPath(context); 
     CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height); 
     [self addRoundedRectToPath:context rect:rect width:cornerWidth height:cornerHeight]; 

     CGContextClosePath(context); 
     CGContextClip(context); 

     CGContextDrawImage(context, CGRectMake(0, 0, w, h), self.CGImage); 
     CGImageRef imageMasked = CGBitmapContextCreateImage(context); 
     CGContextRelease(context); 
     CGColorSpaceRelease(colorSpace); 

     newImage = [[UIImage imageWithCGImage:imageMasked] retain]; 
     CGImageRelease(imageMasked); 

     [pool release]; 
    } 

    return [newImage autorelease]; 
} 


- (void)addRoundedRectToPath:(CGContextRef)context rect:(CGRect)rect width:(float)ovalWidth height:(float)ovalHeight { 
    float fw, fh; 

    // If the width or height of the corner oval is zero, then it reduces to a right angle, 
    // so instead of a rounded rectangle we have an ordinary one. 
    if (ovalWidth == 0 || ovalHeight == 0) { 
     CGContextAddRect(context, rect); 
     return; 
    } 

    // Save the context's state so that the translate and scale can be undone with a call 
    // to CGContextRestoreGState. 
    CGContextSaveGState(context); 

    // Translate the origin of the contex to the lower left corner of the rectangle. 
    CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect)); 

    //Normalize the scale of the context so that the width and height of the arcs are 1.0 
    CGContextScaleCTM (context, ovalWidth, ovalHeight); 

    // Calculate the width and height of the rectangle in the new coordinate system. 
    fw = CGRectGetWidth (rect)/ovalWidth; 
    fh = CGRectGetHeight (rect)/ovalHeight; 

    // CGContextAddArcToPoint adds an arc of a circle to the context's path (creating the rounded 
    // corners). It also adds a line from the path's last point to the begining of the arc, making 
    // the sides of the rectangle. 
    CGContextMoveToPoint(context, fw, fh/2);    // Start at lower right corner 
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1); // Top right corner 
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);  // Top left corner 
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);  // Lower left corner 
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1); // Back to lower right 

    // Close the path 
    CGContextClosePath(context); 

    // Restore the context's state. This removes the translation and scaling 
    // but leaves the path, since the path is not part of the graphics state. 
    CGContextRestoreGState(context); 
} 
+0

¿por qué no añades 'CornerRadius' a la capa de su punto de vista y establecer masksToBounds a SÍ ... eso debería mostrar esquinas redondeadas .. – lukya

+0

esta es una gran publicación para leer, con código - http://vocaro.com/trevor/blog/2009/10/12/resize-a-uiimage-the-right-way/ – petert

+0

@lukya, sí puedo , y lo hice, pero solo quería verificar el problema con este fragmento de código. – Mustafa

Respuesta

11

Aquí es una formulación más simple usando UIKit llama:

- (UIImage*) roundCorneredImage: (UIImage*) orig radius:(CGFloat) r { 
    UIGraphicsBeginImageContextWithOptions(orig.size, NO, 0); 
    [[UIBezierPath bezierPathWithRoundedRect:(CGRect){CGPointZero, orig.size} 
           cornerRadius:r] addClip]; 
    [orig drawInRect:(CGRect){CGPointZero, orig.size}]; 
    UIImage* result = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return result; 
} 

Aviso del parámetro NO - esto hace que el contexto imagen transparente, por lo que la región recortada de salida es transparente.

1

Justo después de la creación del contexto de mapa de bits clara con: comentario

CGContextClearRect (context, CGRectMake(0, 0, w, h)); 
1

de lukya debajo de la pregunta es ¿qué es probable que desee hacer.

Asegúrese de importar QuartzCore:

#import <QuartzCore/QuartzCore.h> 

Entonces, si usted tiene un UIImageView de la imagen que desea tener esquinas redondeadas, llame al teléfono (suponiendo imageView es una propiedad y CornerRadius es el radio de la esquina deseada):

self.imageView.layer.cornerRadius = cornerRadius; 
self.imageView.clipsToBounds = YES; 

Como usted ya tiene self.CGImage, usted podría hacer esto para crear un UIImageView:

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageWithCGImage:self.CGImage]]; 

Solo asegúrese de liberar el imageView después de agregarlo como subvista.

1
profileImageView.layer.cornerRadius = profileImageView.frame.size.height/2; 
profileImageView.clipsToBounds = YES; 
+1

En lugar de solo publicar un código simple, sería útil agregar alguna explicación sobre por qué su solución es mejor o cómo resolver el problema. –