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.

bersepedaIsBetter
sumber

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.

yinkou
sumber
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

Muralikrishna
sumber
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
}
Savas Adar
sumber
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>
Abdul Rehman Butt
sumber
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

Roman Solodyashkin
sumber
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
    }
}
orkoden
sumber
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.

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

  2. layer.masksToBounds = benar

Manish Mahajan
sumber
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).

Nik
sumber
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;
}
helloiloveit
sumber
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!
    }
}
Shrawan
sumber
-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.

tania_S
sumber