IOS: tạo UIImage hoặc UIImageView với các góc bo tròn


98

Có thể tạo một UIImagehoặc một UIImageViewvới các góc tròn không? Bởi vì tôi muốn lấy một UIImagevà hiển thị nó bên trong một UIImageView, nhưng tôi không biết phải làm thế nào.

Câu trả lời:


235

Có, nó là có thể.
Nhập tiêu đề QuartzCore ( #import <QuartzCore/QuartzCore.h>) và chơi với thuộc layertính của UIImageView.

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

Xem tài liệu tham khảo lớp CALayer để biết thêm thông tin.


1
ok nó hoạt động với UIImageView nhưng nếu tôi đặt bên trong UIImageView này một UIImage nó không hoạt động, làm thế nào tôi có thể giải quyết?
xe đạpIsBetter

9
Đừng quên kích hoạt clipToBounds. yourImageView.clipsToBounds = YES;
yinkou

1
Nếu ImageView nằm bên trong ô scrollView hoặc tableView, clipsToBounds làm cho hiệu suất cuộn kém.
OzBoz

Tôi thử nghiệm theo cách này! Tốn nhiều bộ nhớ!
LÊ SANG

Tôi đã sử dụng mã này trong Swift 2.0 và nó hoạt động bình thường, cảm ơn bạn. Nhân tiện, tôi đã thay đổi CÓ bằng sự thật.
lmiguelvargasf

54

Hãy thử mã này cho Hình ảnh tròn Nhập khung QuartzCore cách đơn giản để tạo Hình ảnh tròn

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

nhập mô tả hình ảnh ở đây


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

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
}

làm thế nào để làm trung tâm hình ảnh phần tạo hình dạng đường cong mỏng làm thế nào để có thể khái niệm này xin anh chàng cho tôi biết về ngôn ngữ c khách quan
Ramani Hitesh

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

#import <QuartzCore/QuartzCore.h>

2
Câu trả lời này khác với các câu trả lời khác như thế nào?
mmmmmm

3
@Mark uiimageview.frame.size.height/2;là đá quý thực sự để tạo ra một hình ảnh hình tròn hoàn hảo, một hình tròn đầy đủ.
Trả lời

Làm thế nào để bạn nghĩ ra uiimageview.frame.size.height / 2? Bạn có thể giải thích dùm không?
Idrees Ashraf

@IdreesAshraf một logic đơn giản liên quan ở đây .... bán kính của một nửa chiều cao sẽ bắt đầu từ trên cùng giữa cho đến giữa bên trái. làm cung của 45độ. vì vậy việc có vòng cung như vậy ở 4 cạnh sẽ tạo ra một hình tròn hoàn hảo.
Trả lời

1
@Ans Nó sẽ không thành công nếu tôi có hình ảnh với chiều rộng và chiều cao khác nhau. Bạn có thể thử mà ..
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

nhập mô tả hình ảnh ở đây


Có vẻ như một chút hình ảnh bị chảy qua đường viền. Tôi không chắc chắn nếu có một sửa chữa dễ dàng cho rằng ...
John Gibb

Biên giới được cải thiện
Roman Solodyashkin

2

Thiết lập cornerRadiusclipsToBoundslà cách phù hợp để làm điều này. Tuy nhiên, nếu kích thước của chế độ xem thay đổi, bán kính sẽ không cập nhật. Để có được hành vi thay đổi kích thước và hoạt ảnh thích hợp, bạn cần tạo một UIImageViewlớp con.

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

Hãy thử điều này để có được các góc tròn của Chế độ xem hình ảnh và cũng để tô màu các góc:

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;

Điều kiện *: Chiều cao và chiều rộng của imageView phải giống nhau để có được các góc tròn.



0

Có thể nhưng tôi sẽ khuyên bạn tạo hình ảnh png trong suốt (mặt nạ) với các góc tròn và đặt nó lên hình ảnh của bạn bằng UIImageView. Nó có thể là giải pháp nhanh hơn (ví dụ: nếu bạn cần hoạt ảnh hoặc cuộn).


0

Đây là cách tôi đặt hình đại diện tròn của mình ở giữa nó chứa chế độ xem:

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

Vòng kết nối với 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;

Chiều cao và chiều rộng của imageView phải giống nhau để có được các góc tròn.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.