IOS: crea un UIImage o UIImageView con angoli arrotondati


Risposte:


235

Sì, è possibile.
Importa l' intestazione QuartzCore ( #import <QuartzCore/QuartzCore.h>) e gioca con la layerproprietà del file UIImageView.

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

Vedi il riferimento alla classe CALayer per maggiori informazioni.


1
ok funziona per un UIImageView ma se metto dentro questo UIImageView un UIImage non funziona, come posso risolvere?
CyclingIsBetter

9
Non dimenticare di attivare clipToBounds. yourImageView.clipsToBounds = YES;
yinkou

1
Se ImageView era all'interno di una cella scrollView o tableView, clipsToBounds ha prestazioni di scorrimento scadenti.
OzBoz

Provo in questo modo! Costa molta memoria!
LE SANG

Ho usato questo codice in Swift 2.0 e ha funzionato correttamente, grazie. A proposito, ho cambiato SÌ per vero.
lmiguelvargasf

54

Prova questo codice per l' importazione di immagini rotonde nel modo semplice del framework QuartzCore per creare un'immagine rotonda

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

inserisci qui la descrizione dell'immagine


47

Obiettivo-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
}

come rendere la parte centrale dell'immagine creare una forma curva sottile come possibile questo concetto per favore ragazzo fammi sapere per il linguaggio oggettivo c
Ramani Hitesh

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

#import <QuartzCore/QuartzCore.h>

2
In che cosa differisce dalle altre risposte?
mmmmmm

3
@Mark uiimageview.frame.size.height/2;è un vero gioiello per rendere un'immagine perfetta di forma rotonda, un cerchio completo.
Ans

Come si ottiene uiimageview.frame.size.height / 2? Puoi spiegare per favore?
Idrees Ashraf

@IdreesAshraf una semplice logica coinvolta qui .... il raggio di mezza altezza inizierà dal centro in alto fino al centro a sinistra. facendo un arco di 45 gradi. quindi avere tale arco su 4 lati renderà la vista perfetta.
Ans

1
@Ans Non funzionerà se ho un'immagine con larghezza e altezza diverse. Puoi provarlo ..
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

inserisci qui la descrizione dell'immagine


Sembra che un po 'dell'immagine sanguini oltre il bordo. Non sono sicuro che ci sia una soluzione facile per questo ...
John Gibb

confine migliorato
Roman Solodyashkin

2

Impostazione cornerRadiused clipsToBoundsè il modo giusto per farlo. Tuttavia, se le dimensioni della vista cambiano, il raggio non verrà aggiornato. Per ottenere un ridimensionamento e un comportamento di animazione adeguati, è necessario creare una UIImageViewsottoclasse.

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

Prova questo per ottenere angoli arrotondati dell'immagine Visualizza e anche per colorare gli angoli:

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;

Condizione *: l'altezza e la larghezza di imageView devono essere le stesse per ottenere angoli arrotondati.



0

È possibile ma ti consiglio di creare un'immagine png trasparente (maschera) con angoli arrotondati e posizionarla sopra la tua immagine con UIImageView. Potrebbe essere una soluzione più rapida (ad esempio se hai bisogno di animazioni o scorrimento).


0

Ecco come ho impostato il mio avatar arrotondato al centro di esso contiene vista:

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

Cerchia con 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;

L'altezza e la larghezza di imageView devono essere le stesse per ottenere angoli arrotondati.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.