IOS: создание UIImage или UIImageView с закругленными углами
возможно ли создать UIImage
или UIImageView
с закругленными углами? Потому что я хочу взять UIImage
и показать его внутри UIImageView
, но я не знаю как это сделать.
12 ответов:
Да, это возможно.
ИмпортируйтеQuartzCore
(#import <QuartzCore/QuartzCore.h>
) заголовок и играть сlayer
свойстваUIImageView
.yourImageView.layer.cornerRadius = yourRadius; yourImageView.clipsToBounds = YES;
посмотреть CALayer ссылка на класс для получения дополнительной информации.
попробуйте этот код Круглое Изображение импорт QuartzCore основы простой способ чтобы создать круглое изображение
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];
С
-(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 }
uiimageview.layer.cornerRadius = uiimageview.frame.size.height/2; uiimageview.clipToBounds = YES; #import <QuartzCore/QuartzCore.h>
// 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
задание
cornerRadius
иclipsToBounds
- это правильный способ сделать это. Однако если размер представления изменится, радиус не будет обновляться. Чтобы получить правильное изменение размера и поведение анимации, вам нужно создатьUIImageView
подкласс.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 } }
попробуйте это, чтобы получить закругленные углы изображения, а также цвет углов:
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;
условие*: высота и ширина imageView должны быть одинаковыми, чтобы получить закругленные углы.
это возможно, но я посоветую вам создать прозрачное изображение png (маска) с круглыми углами и поместить его поверх изображения с помощью UIImageView. Это может быть более быстрое решение (например, если вам нужна анимация или прокрутка).
вот как я установил мой округлый аватар в центре его содержат вид:
-(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; }
круг с 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! } }