iPhone ritaglia programmaticamente un'immagine quadrata da visualizzare come cerchio

Question

Sto cercando di creare un'immagine per uno stile personalizzato UIButton utilizzando un'immagine dal rullino fotografico su iPhone. Il pulsante ha uno sfondo circolare e appare effettivamente come un cerchio. Ora ho bisogno di un'immagine per andare nel mezzo del pulsante che appare anche in tondo.

Come si fa a tagliare una UIImmagine quadrata per farla apparire rotonda con trasparenza al di fuori dell'area rotonda?

Se è necessario il mascheramento, è necessario eseguire il rendering preliminare di una maschera o è possibile crearne uno a livello di programmazione (es: un cerchio)?

Grazie!

Answer 1

Sì, è possibile utilizzare CoreGraphics per disegnare la maschera dinamicamente. Quindi è possibile creare l'immagine mascherata.

Esempio per la mascheratura:

- (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; 
} 

Answer 2

Personalmente, vorrei creare un'immagine circolare del cerchio con angoli opachi per sovrapporre la foto. Questa soluzione è adatta solo dove posizionerai l'immagine in un punto dell'interfaccia utente e presumi che gli angoli opachi si fondano con lo sfondo.

Answer 3

non ho mai fatto niente del genere, ma provare a utilizzare QuartzCore quadro e il suo cornerRadius proprietà. Esempio:

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

giocare un po 'con esso e otterrete quello che vuoi.

Speranza che aiuta

Answer 4

che segue è la risposta che ho dato in How to crop UIImage on oval shape or circle shape? per fare il cerchio dell'immagine. Funziona per me ..

Download the Support archive file

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

seguito linee utilizzate per ridimensionare l'immagine e convertirla in a turno con raggio

UIImage *mask = [UIImage imageNamed:@"mask.jpg"]; 

mask = [mask resizedImage:CGSizeMake(47, 47) interpolationQuality:kCGInterpolationHigh ]; 
mask = [mask roundedCornerImage:23.5 borderSize:1]; 

Answer 5

ho iniziato a cercare in questo un paio di settimane fa. Ho provato tutti i suggerimenti qui, nessuno dei quali ha funzionato bene. Nella grande tradizione di RTFM sono andato a leggere la documentazione di Apple su Quartz 2D Programming e ho trovato questo. Per favore provalo e fammi sapere come vai.

Il codice potrebbe essere facilmente modificato per ritagliare un'elisse o qualsiasi altra forma definita da un percorso.

Assicurarsi di includere Quartz 2D nel progetto.

#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; 
} 

includere il seguente codice nella classe UIView sostituendo "monk2.png" con il proprio nome dell'immagine.

- (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]; 

} 

Answer 6

ho un'altra soluzione:

- (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; 

} 

Questa variante è migliore per prestazioni di impostare direttamente cornerRadius.

Answer 7

categoria UIImage per mascherare un'immagine con un cerchio:

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

garantita here.

Answer 8

Ecco un modo rapido per creare angoli arrotondati su un ImageView quadrato per farlo sembrare un cerchio perfetto. Fondamentalmente si applica un raggio d'angolo uguale a 1/2 della larghezza (larghezza == altezza su un'immagine quadrata).

#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; 

Answer 9

{ 
    imageView.layer.cornerRadius = imageView.frame.size.height /2; 
    imageView.layer.masksToBounds = YES; 
    imageView.layer.borderWidth = 0; 
} 

Answer 10

Basta usare

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