IOS: Erstellen Sie ein UIImage oder UIImageView mit abgerundeten Ecken

98

Ist es möglich ein UIImageoder ein UIImageViewmit abgerundeten Ecken zu erstellen ? Weil ich ein nehmen UIImageund es in einem zeigen möchte UIImageView, aber ich weiß nicht, wie ich es machen soll.

RadfahrenIsBetter
quelle

Antworten:

235

Ja, es ist möglich.
Importieren Sie den Header QuartzCore ( #import <QuartzCore/QuartzCore.h>) und spielen Sie mit der layerEigenschaft von UIImageView.

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

Weitere Informationen finden Sie in der CALayer- Klassenreferenz.

Yinkou
quelle
1
ok, es funktioniert für eine UIImageView, aber wenn ich in diese UIImageView ein UIImage einfüge, funktioniert es nicht. Wie kann ich es lösen?
CyclingIsBetter
9
Vergiss nicht zu aktivieren clipToBounds. yourImageView.clipsToBounds = YES;
Yinkou
1
Wenn sich ImageView in einer scrollView- oder tableView-Zelle befand, führt clipsToBounds zu einer schlechten Bildlaufleistung.
OzBoz
Ich teste so! Kostet viel Speicher!
LE SANG
Ich habe diesen Code in Swift 2.0 verwendet und er hat ordnungsgemäß funktioniert, danke. Übrigens habe ich JA durch wahr geändert.
lmiguelvargasf
54

Versuchen Sie, diesen Code für Runde Bild Import Quartz Rahmen einfache Art und Weise rundes Bild zu erstellen

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

Geben Sie hier die Bildbeschreibung ein

Muralikrishna
quelle
47

Ziel 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
}
Savas Adar
quelle
wie Bildmittelteil Kurvenform schlank schaffen , wie möglich dieses Konzept bitte Kerl lassen Sie mich wissen , für eine objektive c Sprache zu machen
Ramani Hitesh
10
uiimageview.layer.cornerRadius = uiimageview.frame.size.height/2;
uiimageview.clipToBounds = YES;

#import <QuartzCore/QuartzCore.h>
Abdul Rehman Butt
quelle
2
Wie unterscheidet sich das von anderen Antworten?
mmmmmm
3
@Mark uiimageview.frame.size.height/2;ist ein echtes Juwel, um ein Bild perfekt rund zu machen, einen vollen Kreis.
Ans
Wie kommst du auf uiimageview.frame.size.height / 2? Kannst du bitte Erklären?
Idrees Ashraf
@IdreesAshraf eine einfache Logik hier beteiligt .... Radius der halben Höhe beginnt von der oberen Mitte bis zur linken Mitte. Bogen von 45 Grad machen. Wenn Sie also einen solchen Bogen auf 4 Seiten haben, ergibt sich ein perfekter Kreis.
Ans
1
@Ans Es wird fehlschlagen, wenn ich ein Bild mit unterschiedlicher Breite und Höhe habe. Sie können das versuchen ..
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

Geben Sie hier die Bildbeschreibung ein

Roman Solodyashkin
quelle
Es sieht so aus, als würde ein wenig des Bildes über die Grenze hinaus bluten. Ich bin nicht sicher, ob es eine einfache Lösung dafür gibt ...
John Gibb
Grenze verbessert
Roman Solodyashkin
2

Einstellung cornerRadiusund clipsToBoundsist der richtige Weg, dies zu tun. Wenn sich jedoch die Größe der Ansicht ändert, wird der Radius nicht aktualisiert. Um eine ordnungsgemäße Größenänderung und ein korrektes Animationsverhalten zu erzielen, müssen Sie eine UIImageViewUnterklasse erstellen .

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
quelle
1

Versuchen Sie dies, um abgerundete Ecken der Bildansicht zu erhalten und die Ecken einzufärben:

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;

Bedingung *: Die Höhe und Breite der Bildansicht müssen gleich sein, um abgerundete Ecken zu erhalten.

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

  2. layer.masksToBounds = true

Manish Mahajan
quelle
0

Es ist möglich, aber ich rate Ihnen, ein transparentes PNG-Bild (Maske) mit runden Ecken zu erstellen und es mit UIImageView über Ihrem Bild zu platzieren. Dies ist möglicherweise eine schnellere Lösung (z. B. wenn Sie Animationen oder Bildlauf benötigen).

Nik
quelle
0

Hier, wie ich meinen abgerundeten Avatar in die Mitte setze, enthält die Ansicht:

-(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;
}
helloiloveit
quelle
0

Kreis mit 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
quelle
-1
# import QuartzCore framework
imageView.layer.cornerRadius=imgvwUser.frame.size.width/2;
imageView.layer.masksToBounds = YES;

Die Höhe und Breite der Bildansicht müssen gleich sein, um abgerundete Ecken zu erhalten.

tania_S
quelle