IOS: crea un UIImage o UIImageView con esquinas redondeadas

98

¿Es posible crear una UIImageo una UIImageViewcon esquinas redondeadas? Porque quiero tomar un UIImagey mostrarlo dentro de un UIImageView, pero no sé cómo hacerlo.

CiclismoEsMejor
fuente

Respuestas:

235

Sí, es posible.
Importe el encabezado QuartzCore ( #import <QuartzCore/QuartzCore.h>) y juegue con la layerpropiedad del UIImageView.

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

Consulte la referencia de la clase CALayer para obtener más información.

yinkou
fuente
1
ok, funciona para un UIImageView, pero si pongo dentro de este UIImageView un UIImage, no funciona, ¿cómo puedo resolverlo?
cyclingIsBetter
9
No olvide activar clipToBounds. yourImageView.clipsToBounds = YES;
yinkou
1
Si ImageView estaba dentro de la celda scrollView o tableView, clipsToBounds tiene un mal rendimiento de desplazamiento.
OzBoz
¡Pruebo de esta manera! ¡Cuesta mucha memoria!
LE SANG
He usado este código en Swift 2.0 y funcionó correctamente, gracias. Por cierto, he cambiado SÍ por verdadero.
lmiguelvargasf
54

Pruebe este código para el marco QuartzCore de importación de imágenes redondas, una forma sencilla de crear una imagen redonda

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

ingrese la descripción de la imagen aquí

Muralikrishna
fuente
47

C objetivo

-(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
}
Savas Adar
fuente
cómo hacer que la parte central de la imagen cree una forma de curva delgada cómo es posible este concepto, por favor, hágamelo saber para el lenguaje c objetivo
Ramani Hitesh
10
uiimageview.layer.cornerRadius = uiimageview.frame.size.height/2;
uiimageview.clipToBounds = YES;

#import <QuartzCore/QuartzCore.h>
Abdul Rehman Butt
fuente
2
¿En qué se diferencia esto de otras respuestas?
mmmmmm
3
@Mark uiimageview.frame.size.height/2;es una verdadera joya para hacer una imagen de forma redonda perfecta, un círculo completo.
Respuesta
¿Cómo se le ocurrió uiimageview.frame.size.height / 2? ¿Puede usted explicar por favor?
Idrees Ashraf
@IdreesAshraf una lógica simple involucrada aquí .... el radio de media altura comenzará desde la parte superior central hasta la izquierda central. haciendo un arco de 45 grados. por lo que tener dicho arco en 4 lados hará que la vista sea un círculo perfecto.
Respuesta
1
@Ans Fallará si tengo una imagen con diferente ancho y alto. Puedes intentarlo ..
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

ingrese la descripción de la imagen aquí

Roman Solodyashkin
fuente
Parece que un poco de la imagen traspasa el borde. No estoy seguro de si hay una solución fácil para eso ...
John Gibb
frontera mejorada
Roman Solodyashkin
2

Configuración cornerRadiusy clipsToBoundses la forma correcta de hacer esto. Sin embargo, si cambia el tamaño de la vista, el radio no se actualizará. Para obtener un comportamiento adecuado de cambio de tamaño y animación, debe crear una UIImageViewsubclase.

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
    }
}
Orkoden
fuente
1

Pruebe esto para obtener esquinas redondeadas de la vista de imagen y también para colorear las esquinas:

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;

Condición *: La altura y el ancho de imageView deben ser iguales para obtener esquinas redondeadas.

Md Rais
fuente
1
  1. layer.cornerRadius = imageviewHeight / 2

  2. layer.masksToBounds = verdadero

Manish Mahajan
fuente
0

Es posible, pero te aconsejo que crees una imagen png transparente (máscara) con esquinas redondeadas y la coloques sobre tu imagen con UIImageView. Podría ser una solución más rápida (por ejemplo, si necesita animaciones o desplazamientos).

Nik
fuente
0

Aquí cómo configuro mi avatar redondeado en el centro de la vista de contenido:

-(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;
}
holailoveit
fuente
0

Círculo 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!
    }
}
Shrawan
fuente
-1
# import QuartzCore framework
imageView.layer.cornerRadius=imgvwUser.frame.size.width/2;
imageView.layer.masksToBounds = YES;

La altura y el ancho de imageView deben ser iguales para obtener esquinas redondeadas.

tania_S
fuente