IOS: créez une UIImage ou UIImageView avec des coins arrondis


98

Est-il possible de créer un UIImageou un UIImageViewavec des coins arrondis? Parce que je veux prendre un UIImageet le montrer dans un UIImageView, mais je ne sais pas comment le faire.

Réponses:


235

Oui c'est possible.
Importez l'en QuartzCore - #import <QuartzCore/QuartzCore.h>tête ( ) et jouez avec la layerpropriété du UIImageView.

yourImageView.layer.cornerRadius = yourRadius;
yourImageView.clipsToBounds = YES;

Consultez la référence de la classe CALayer pour plus d'informations.


1
ok cela fonctionne pour une UIImageView mais si je mets dans cette UIImageView une UIImage cela ne fonctionne pas, comment puis-je résoudre?
cyclingIsBetter

9
N'oubliez pas d'activer clipToBounds. yourImageView.clipsToBounds = YES;
yinkou

1
Si ImageView était à l'intérieur de la cellule scrollView ou tableView, clipsToBounds entraîne de mauvaises performances de défilement.
OzBoz

Je teste de cette façon! Coûte beaucoup de mémoire!
LE SANG

J'ai utilisé ce code dans Swift 2.0, et cela a fonctionné correctement, merci. Au fait, j'ai changé OUI par vrai.
lmiguelvargasf

54

Essayez ce code pour l' importation d' images rondes Cadre QuartzCore moyen simple de créer une image ronde

imageView.layer.backgroundColor=[[UIColor clearColor] CGColor];
imageView.layer.cornerRadius=20;
imageView.layer.borderWidth=2.0;
imageView.layer.masksToBounds = YES;
imageView.layer.borderColor=[[UIColor redColor] CGColor];

entrez la description de l'image ici


47

Objectif c

-(UIImage *)makeRoundedImage:(UIImage *) image 
                      radius: (float) radius;
{
  CALayer *imageLayer = [CALayer layer];
  imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height);
  imageLayer.contents = (id) image.CGImage;

  imageLayer.masksToBounds = YES;
  imageLayer.cornerRadius = radius;

  UIGraphicsBeginImageContext(image.size);
  [imageLayer renderInContext:UIGraphicsGetCurrentContext()];
  UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();

  return roundedImage;
}

Swift 3

func makeRoundedImage(image: UIImage, radius: Float) -> UIImage {
    var imageLayer = CALayer()
    imageLayer.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)
    imageLayer.contents = image.cgImage

    imageLayer.masksToBounds = true
    imageLayer.cornerRadius = radius

    UIGraphicsBeginImageContext(image.size)
    imageLayer.render(in: UIGraphicsGetCurrentContext())
    var roundedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return roundedImage
}

comment rendre la partie centrale de l'image créer une forme de courbe mince comment possible ce concept s'il vous plaît gars laissez-moi savoir pour le langage objectif c
Ramani Hitesh

10
uiimageview.layer.cornerRadius = uiimageview.frame.size.height/2;
uiimageview.clipToBounds = YES;

#import <QuartzCore/QuartzCore.h>

2
En quoi cela diffère-t-il des autres réponses?
mmmmmm

3
@Mark uiimageview.frame.size.height/2;est un vrai bijou pour créer une image de forme ronde parfaite, un cercle complet.
Ans

Comment trouvez-vous uiimageview.frame.size.height / 2? Pouvez-vous expliquer?
Idrees Ashraf

@IdreesAshraf une logique simple impliquée ici .... le rayon de mi-hauteur commencera du haut au milieu au milieu à gauche. faisant un arc de 45 degrés. donc avoir un tel arc sur 4 côtés fera un cercle parfait de vue.
Ans

1
@Ans Cela échouera si j'ai une image avec une largeur et une hauteur différentes. Vous pouvez essayer ça ..
Idrees Ashraf

3
// UIImageView+OSExt.h
#import <UIKit/UIKit.h>

@interface UIImageView (OSExt)
- (void)setBorder:(CGFloat)borderWidth color:(UIColor*)color;
@end

// UIImageView+OSExt.m
#import "UIImageView+OSExt.h"

@implementation UIImageView (OSExt)
- (void)layoutSublayersOfLayer:(CALayer *)layer
{
    for ( CALayer *sub in layer.sublayers )
    {
        if ( YES == [sub.name isEqual:@"border-shape"])
        {
            CGFloat borderHalf = floor([(CAShapeLayer*)sub lineWidth] * .5);
            sub.frame = layer.bounds;
            [sub setBounds:CGRectInset(layer.bounds, borderHalf, borderHalf)];
            [sub setPosition:CGPointMake(CGRectGetMidX(layer.bounds),
                                       CGRectGetMidY(layer.bounds))];
        }
    }
}

- (void)setBorder:(CGFloat)borderWidth color:(UIColor*)color
{
    assert(self.frame.size.width == self.frame.size.height);
    for ( CALayer *sub in [NSArray arrayWithArray:self.layer.sublayers] )
    {
        if ( YES == [sub.name isEqual:@"border-shape"])
        {
            [sub removeFromSuperlayer];
            break;
        }
    }

    CGFloat borderHalf = floor(borderWidth * .5);
    self.layer.cornerRadius = self.layer.bounds.size.width * .5;

    CAShapeLayer *circleLayer = [CAShapeLayer layer];
    self.layer.delegate = (id<CALayerDelegate>)self;
    circleLayer.name = @"border-shape";
    [circleLayer setBounds:CGRectInset(self.bounds, borderHalf, borderHalf)];
    [circleLayer setPosition:CGPointMake(CGRectGetMidX(self.layer.bounds),
                                         CGRectGetMidY(self.layer.bounds))];
    [circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleLayer.bounds] CGPath]];
    [circleLayer setStrokeColor:color.CGColor];
    [circleLayer setFillColor:[UIColor clearColor].CGColor];
    [circleLayer setLineWidth:borderWidth];

    {
    circleLayer.shadowOffset = CGSizeZero;
    circleLayer.shadowColor = [[UIColor whiteColor] CGColor];
    circleLayer.shadowRadius = borderWidth;
    circleLayer.shadowOpacity = .9f;
    circleLayer.shadowOffset = CGSizeZero;
    }

    // Add the sublayer to the image view's layer tree
    [self.layer addSublayer:circleLayer];

    // old variant
    //CALayer *layer = self.layer;
    //layer.masksToBounds = YES;
    //layer.cornerRadius = self.frame.size.width * 0.5;
    //layer.borderWidth = borderWidth;
    //layer.borderColor = color;
}
@end

entrez la description de l'image ici


Il semble qu'un peu de l'image saigne au-delà de la bordure. Je ne sais pas s'il existe une solution facile à cela…
John Gibb

bordure améliorée
Roman Solodyashkin

2

Réglage cornerRadiuset clipsToBoundsest la bonne façon de le faire. Cependant, si la taille de la vue change, le rayon ne sera pas mis à jour. Afin d'obtenir un redimensionnement et un comportement d'animation appropriés, vous devez créer une UIImageViewsous - classe.

class RoundImageView: UIImageView {
    override var bounds: CGRect {
        get {
            return super.bounds
        }
        set {
            super.bounds = newValue
            setNeedsLayout()
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.width / 2.0
        clipsToBounds = true
    }
}

1

Essayez ceci pour obtenir les coins arrondis de la vue de l'image et aussi pour colorer les coins:

imageView.layer.cornerRadius = imageView.frame.size.height/2;
imageView.layer.masksToBounds = YES;
imageView.layer.borderColor = [UIColor colorWithRed:148/255. green:79/255. blue:216/255. alpha:1.0].CGColor;
imageView.layer.borderWidth=2;

Condition *: La hauteur et la largeur de l'imageView doivent être identiques pour obtenir des coins arrondis.



0

C'est possible, mais je vous conseille de créer une image png transparente (masque) avec des coins arrondis et de la placer sur votre image avec UIImageView. Cela peut être une solution plus rapide (par exemple si vous avez besoin d'animations ou de défilement).


0

Voici comment je place mon avatar arrondi au centre de celui-ci contient une vue:

-(void)setRoundedAvatar:(UIImageView *)avatarView toDiameter:(float)newSize atView:(UIView *)containedView;
{
    avatarView.layer.cornerRadius = newSize/2;
    avatarView.clipsToBounds = YES;

    avatarView.frame = CGRectMake(0, 0, newSize, newSize);
    CGPoint centerValue = CGPointMake(containView.frame.size.width/2, containedView.frame.size.height/2);
    avatarView.center = centerValue;
}

0

Cercle avec UIBeizerPath # Swift-3 && #imageExtension

class ViewController: UIViewController {
    @IBOutlet weak var imageOutlet: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let image = UIImage(named: "IMG_0001.JPG")
        if let image = image {
            let renderimage = image.imageCroppingBezierPath(path: UIBezierPath(arcCenter: CGPoint(x:image.size.width/2,y:image.size.width/2 )  , radius: 200, startAngle: 0, endAngle:  (2 * CGFloat(M_PI) ), clockwise: true) )
                imageOutlet.image = renderimage
        }
    }
}


extension UIImage {
    func imageCroppingBezierPath(path:UIBezierPath) ->UIImage {

        let frame = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)

        //Defining a graphic context  to paint on
        UIGraphicsBeginImageContextWithOptions(self.size, false, 0.0)
        //Get the current graphics context (if it exists)
        let context = UIGraphicsGetCurrentContext()
        //save the current graphic context
        context?.saveGState()
        // clipping area
        path.addClip()
        self.draw(in: frame)

        //To extract an image from our canvas
        let image = UIGraphicsGetImageFromCurrentImageContext()
        //restore graphic context
        context?.restoreGState()
        //remove current context from stack
        UIGraphicsEndImageContext()
        return image!
    }
}

-1
# import QuartzCore framework
imageView.layer.cornerRadius=imgvwUser.frame.size.width/2;
imageView.layer.masksToBounds = YES;

La hauteur et la largeur de l'imageView doivent être identiques pour obtenir des coins arrondis.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.