iPhone recorta mediante progtwigción una image cuadrada para que aparezca como un círculo

Estoy intentando crear una image para un UIB de estilo personalizado usando una image del rollo de la camera en el iPhone. El button tiene un background circular y efectivamente aparece como un círculo. Ahora necesito una image para ir en el medio del button que también aparece networkingondo.

¿Cómo recorto un UIImage cuadrado para que aparezca networkingondo con transparencia fuera del área networkingonda?

Si se trata de un enmascaramiento, ¿tengo que pre-renderizar una máscara o puedo crear uno mediante progtwigción (ej: un círculo)?

¡Gracias!

Sí, puedes usar CoreGraphics para dibujar la máscara dinámicamente. Entonces puedes crear la image enmascarada.

Ejemplo de enmascaramiento:

 - (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage { CGImageRef maskRef = maskImage.CGImage; CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), CGImageGetHeight(maskRef), CGImageGetBitsPerComponent(maskRef), CGImageGetBitsPerPixel(maskRef), CGImageGetBytesPerRow(maskRef), CGImageGetDataProvider(maskRef), NULL, false); CGImageRef maskedImageRef = CGImageCreateWithMask([image CGImage], mask); UIImage *maskedImage = [UIImage imageWithCGImage:maskedImageRef]; CGImageRelease(maskedImageRef); CGImageRelease(mask); return maskedImage; } 

Nunca he hecho nada de eso, pero intente usar el marco QuartzCore y su propiedad ' cornerRadius '. Ejemplo:

 #import <QuartzCore/QuartzCore.h> //some other code ... UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)]; imgView.layer.cornerRadius = 10.0f; 

juega un poco con él y obtendrás lo que quieres.

Espero eso ayude

Comencé a investigar esto hace un par de semanas. Probé todas las sugerencias aquí, ninguna de las cuales funcionó bien. En la gran tradición de RTFM, fui a leer la documentation de Apple sobre Quartz 2D Programming y se me ocurrió esto. Por favor, pruébelo y déjame saber cómo te va.

El código podría modificarse fácilmente para recortar en un elipse o cualquier otra forma definida por un path.

Asegúrate de include Quartz 2D en tu proyecto.

 #include <math.h> + (UIImage*)circularScaleNCrop:(UIImage*)image: (CGRect) rect{ // This function returns a newImage, based on image, that has been: // - scaled to fit in (CGRect) rect // - and cropped within a circle of radius: rectWidth/2 //Create the bitmap graphics context UIGraphicsBeginImageContextWithOptions(CGSizeMake(rect.size.width, rect.size.height), NO, 0.0); CGContextRef context = UIGraphicsGetCurrentContext(); //Get the width and heights CGFloat imageWidth = image.size.width; CGFloat imageHeight = image.size.height; CGFloat rectWidth = rect.size.width; CGFloat rectHeight = rect.size.height; //Calculate the scale factor CGFloat scaleFactorX = rectWidth/imageWidth; CGFloat scaleFactorY = rectHeight/imageHeight; //Calculate the centre of the circle CGFloat imageCentreX = rectWidth/2; CGFloat imageCentreY = rectHeight/2; // Create and CLIP to a CIRCULAR Path // (This could be replaced with any closed path if you want a different shaped clip) CGFloat radius = rectWidth/2; CGContextBeginPath (context); CGContextAddArc (context, imageCentreX, imageCentreY, radius, 0, 2*M_PI, 0); CGContextClosePath (context); CGContextClip (context); //Set the SCALE factor for the graphics context //All future draw calls will be scaled by this factor CGContextScaleCTM (context, scaleFactorX, scaleFactorY); // Draw the IMAGE CGRect myRect = CGRectMake(0, 0, imageWidth, imageHeight); [image drawInRect:myRect]; UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newImage; } 

Incluya el siguiente código en su class UIView reemplazando "monk2.png" con su propio nombre de image.

 - (void)drawRect:(CGRect)rect { UIImage *originalImage = [UIImage imageNamed:[NSString stringWithFormat:@"monk2.png"]]; CGFloat oImageWidth = originalImage.size.width; CGFloat oImageHeight = originalImage.size.height; // Draw the original image at the origin CGRect oRect = CGRectMake(0, 0, oImageWidth, oImageHeight); [originalImage drawInRect:oRect]; // Set the newRect to half the size of the original image CGRect newRect = CGRectMake(0, 0, oImageWidth/2, oImageHeight/2); UIImage *newImage = [self circularScaleNCrop:originalImage :newRect]; CGFloat nImageWidth = newImage.size.width; CGFloat nImageHeight = newImage.size.height; //Draw the scaled and cropped image CGRect thisRect = CGRectMake(oImageWidth+10, 0, nImageWidth, nImageHeight); [newImage drawInRect:thisRect]; } 

Aquí hay una manera rápida de crear esquinas networkingondeadas en un ImageView cuadrado para que se vea como un círculo perfecto. Básicamente, aplica un radio de esquina igual a 1/2 el ancho (ancho == alto en una image cuadrada).

 #import <QuartzCore/QuartzCore.h> //you need QuartzCore ... float width = imageView.bounds.size.width; // we can also use the frame property instead of bounds since we just care about the Size and don't care about position imageView.layer.cornerRadius = width/2; 
 { imageView.layer.cornerRadius = imageView.frame.size.height /2; imageView.layer.masksToBounds = YES; imageView.layer.borderWidth = 0; } 

Categoría UIImage para enmascarar una image con un círculo:

 UIImage *originalImage = [UIImage imageNamed:@"myimage.png"]; UImage *myRoundedImage = [UIImage roundedImageWithImage:originalImage]; 

Consíguelo aquí .

Tengo otra solución:

 - (UIImage *)roundedImageWithRect:(CGRect)rect radius:(CGFloat)radius { UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0); UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, rect.size.width, rect.size.height) cornerRadius:radius]; CGFloat imageRatio = self.size.width / self.size.height; CGSize imageSize = CGSizeMake(rect.size.height * imageRatio, rect.size.height); CGRect imageRect = CGRectMake(0, 0, imageSize.width, imageSize.height); [path addClip]; [self drawInRect:imageRect]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return image; } 

Esta variante es mejor para el performance que establecer directamente cornerRadius.

Personalmente, creo una image de círculo transparente con esquinas opacas para superponer la foto. Esta solución solo es adecuada cuando colocará la image en un lugar en la interfaz de usuario y asume que las esquinas opacas se mezclarán con el background.

La siguiente es la respuesta que di en Cómo recortar UIImage en forma oval o forma de círculo? para hacer que el círculo de la image. Esto funciona para mi..

Descargue el file de soporte técnico

 #import "UIImage+RoundedCorner.h" #import "UIImage+Resize.h" 

Siguiendo las líneas utilizadas para cambiar el tamaño de la image y convertirla en networkingonda con radio

 UIImage *mask = [UIImage imageNamed:@"mask.jpg"]; mask = [mask resizedImage:CGSizeMake(47, 47) interpolationQuality:kCGInterpolationHigh ]; mask = [mask roundedCornerImage:23.5 borderSize:1]; 

Solo usa

 _profilePictureImgView.layer.cornerRadius = 32.0f; _profilePictureImgView.layer.masksToBounds = YES;