IOS: buat UIImage atau UIImageView dengan sudut membulat


98

Apakah mungkin membuat sebuah UIImageatau an UIImageViewdengan sudut membulat? Karena saya ingin mengambil UIImagedan menunjukkannya di dalam UIImageView, tetapi saya tidak tahu bagaimana melakukannya.

Jawaban:


235

Ya, itu mungkin.
Impor header QuartzCore ( #import <QuartzCore/QuartzCore.h>) dan mainkan dengan layerproperti dari UIImageView.

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

Lihat referensi kelas CALayer untuk info lebih lanjut.


1
ok itu bekerja untuk UIImageView tetapi jika saya meletakkan di dalam UIImageView ini sebuah UIImage tidak berfungsi, bagaimana saya bisa mengatasinya?
cyclingIsBetter

9
Jangan lupa aktifkan clipToBounds. yourImageView.clipsToBounds = YES;
yinkou

1
Jika ImageView berada di dalam sel scrollView atau tableView, clipsToBounds membuat kinerja scroll buruk.
OzBoz

Saya mengujinya dengan cara ini! Menghabiskan banyak memori!
LE SANG

Saya telah menggunakan kode ini di Swift 2.0, dan berfungsi dengan baik, terima kasih. Omong-omong, saya telah mengubah YA dengan benar.
lmiguelvargasf

54

Coba Code For Round Image Import QuartzCore framework cara sederhana untuk membuat Round Image

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

masukkan deskripsi gambar di sini


47

Objective-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;
}

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

bagaimana membuat bagian tengah gambar membuat bentuk kurva ramping bagaimana mungkin konsep ini tolong beri tahu saya untuk bahasa obyektif c
Ramani Hitesh

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

#import <QuartzCore/QuartzCore.h>

2
Bagaimana ini berbeda dari jawaban lain?
mmmmmm

3
@Mark uiimageview.frame.size.height/2;adalah permata nyata untuk membuat gambar berbentuk bulat sempurna, lingkaran penuh.
Ans

Bagaimana Anda mendapatkan uiimageview.frame.size.height / 2? Bisakah Anda menjelaskan?
Idrees Ashraf

@IdreesAshraf sebuah logika sederhana yang terlibat di sini .... radius setengah tinggi akan mulai dari tengah atas hingga tengah kiri. membuat busur 45 derajat. jadi memiliki busur seperti itu pada 4 sisi akan membuat tampilan lingkaran sempurna.
Ans

1
@Ans Akan gagal jika saya memiliki gambar dengan lebar dan tinggi yang berbeda. Anda dapat mencobanya ..
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

masukkan deskripsi gambar di sini


Sepertinya gambar sedikit melewati batas. Saya tidak yakin apakah ada solusi yang mudah untuk itu…
John Gibb

perbatasan diperbaiki
Roman Solodyashkin

2

Setting cornerRadiusdan clipsToBoundsmerupakan cara yang tepat untuk melakukan ini. Namun jika ukuran tampilan berubah, radius tidak akan diperbarui. Untuk mendapatkan pengubahan ukuran dan perilaku animasi yang tepat, Anda perlu membuat UIImageViewsubclass.

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

Coba ini untuk mendapatkan sudut membulat dari Tampilan gambar dan juga untuk mewarnai sudut:

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;

Kondisi *: Tinggi dan lebar imageView harus sama untuk mendapatkan sudut membulat.



0

Itu mungkin tetapi saya akan menyarankan Anda untuk membuat gambar png transparan (topeng) dengan sudut bulat dan meletakkannya di atas gambar Anda dengan UIImageView. Ini mungkin solusi yang lebih cepat (misalnya jika Anda membutuhkan animasi atau scrolling).


0

Berikut cara saya mengatur avatar bulat saya di tengahnya berisi tampilan:

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

Lingkari dengan 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;

Tinggi dan lebar imageView harus sama untuk mendapatkan sudut membulat.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.