Comment masquer une image carrée en une image aux coins arrondis dans iOS ?

Question

Comment masquer une image carrée en une image aux coins arrondis ?

Answer 1

Vous pouvez utiliser CoreGraphics pour créer un chemin pour un rectangle rond avec cet extrait de code :

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight)
{
    float fw, fh;
    if (ovalWidth == 0 || ovalHeight == 0) {
        CGContextAddRect(context, rect);
        return;
    }
    CGContextSaveGState(context);
    CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGContextScaleCTM (context, ovalWidth, ovalHeight);
    fw = CGRectGetWidth (rect) / ovalWidth;
    fh = CGRectGetHeight (rect) / ovalHeight;
    CGContextMoveToPoint(context, fw, fh/2);
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1);
    CGContextClosePath(context);
    CGContextRestoreGState(context);
}

Puis appeler CGContextClip(context) ; pour l'attacher à la trajectoire du rectangle. Désormais, tout dessin effectué, y compris le dessin d'une image, sera découpé dans la forme du rectangle rond.

Par exemple, en supposant que "image" est une UIImage, et qu'il s'agit d'une méthode drawRect: :

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
addRoundedRectToPath(context, self.frame, 10, 10);
CGContextClip(context);
[image drawInRect:self.frame];
CGContextRestoreGState(context);

Answer 2

Voici une méthode encore plus simple, disponible à partir de l'iPhone 3.0. Chaque objet basé sur une vue est associé à un calque. Chaque couche peut avoir un rayon d'angle défini, ce qui vous donnera exactement ce que vous voulez :

UIImageView * roundedView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"wood.jpg"]];
// Get the Layer of any view
CALayer * layer = [roundedView layer];
[layer setMasksToBounds:YES];
[layer setCornerRadius:10.0];

// You can even add a border
[layer setBorderWidth:4.0];
[layer setBorderColor:[[UIColor blueColor] CGColor]];

Pour utiliser ces méthodes, il peut être nécessaire d'ajouter :

#import <QuartzCore/QuartzCore.h>

Answer 3

Je sais que c'est une vieille nouvelle, mais il faut la résumer un peu :

Il y a deux questions possibles ici : (1) comment appliquer des coins arrondis à une UIView (telle qu'une UIImageView), qui sera affichée à l'écran, et (2) comment masquer une image carrée (c'est-à-dire une UIImage) pour produire une nouvelle image avec des coins arrondis.

Pour (1), le plus simple est d'utiliser CoreAnimation et de définir la propriété view.layer.cornerRadius

 // Because we're using CoreAnimation, we must include QuartzCore.h
 // and link QuartzCore.framework in a build phases 
 #import <QuartzCore/QuartzCore.h> 

 // start with an image 
 UIImage * fooImage = [UIImage imageNamed:@"foo.png"];
 // put it in a UIImageView
 UIView * view = [UIImageView alloc] initWithImage:fooImage];
 // round its corners. This mask now applies to the view's layer's *background*
 view.layer.cornerRadius = 10.f
 // enable masksToBounds, so the mask applies to its foreground, the image
 view.layer.masksToBounds = YES;

Pour (2), le meilleur moyen est d'utiliser les opérations graphiques d'UIKit :

// start with an image 
UIImage * fooImage = [UIImage imageNamed:@"foo.png"];
CGRect imageRect = CGRectMake(0, 0, fooImage.size.width, fooImage.size.height);
// set the implicit graphics context ("canvas") to a bitmap context for images
UIGraphicsBeginImageContextWithOptions(imageRect.size,NO,0.0);
// create a bezier path defining rounded corners
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:10.f];
// use this path for clipping in the implicit context
[path addClip];
// draw the image into the implicit context
[fooImage drawInRect:imageRect];
// save the clipped image from the implicit context into an image 
UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext();
// cleanup
UIGraphicsEndImageContext();

Ce qui est délicat dans le problème (2), c'est que l'on peut penser que l'on peut effectuer toute l'opération en utilisant la propriété view.layer.mask de CoreAnimation. Mais ce n'est pas le cas, car le CALayer renderInContext: que vous utiliseriez pour générer une image UII à partir du calque masqué, semble ignorer le masque. Pire encore, la documentation de la méthode renderInContext: ne le mentionne pas, et fait seulement allusion au comportement pour OSX 10.5.

Un peu plus de contexte : l'approche ci-dessus pour (2) utilise les enveloppes d'UIKit autour de fonctionnalités CoreGraphics plus basiques. Vous pouvez faire la même chose en utilisant directement les appels CoreGraphics - c'est ce que fait la réponse choisie - mais vous devez alors construire manuellement le chemin de bézier du rectangle arrondi à partir de courbes et de lignes et vous devez également compenser le fait que CoreGraphics utilise un système de coordonnées de dessin qui est inversé par rapport à celui d'UIKit.

Answer 4

S

H

UIImageView * roundedView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"wood.jpg"]];
// Get the Layer of any view
CALayer * l = [roundedView layer];
[l setMasksToBounds:YES];
[l setCornerRadius:10.0];

Answer 5

Très simple. auto.profileImageView.la couche.cornerRadius = auto.profileImageView.cadre.taille.largeur / 2; auto.profileImageView.clipsToBounds = OUI;

Pour chaque vue, il est livré propriété de calque. Donc, la première ligne de la ci-dessus est de définir le rayon de l'angle de la couche de l'objet (c'est à dire une instance de CALayer classe). Pour faire une image circulaire à partir d'un carré de l'image, le rayon est fixé à la moitié de la largeur de UIImageView. Par exemple, si la largeur du carré de l'image de 100 pixels. Le rayon est fixé à 50 pixels. Deuxièmement, vous devez définir le clipsToBounds bien sur OUI pour faire la couche de travaux.