IOS: गोल कोनों के साथ एक UIImage या UIImageView बनाएं

Question

क्या यह संभव है UIImageया UIImageViewगोल कोनों के साथ? क्योंकि मैं एक लेना चाहता हूँ UIImageऔर यह एक अंदर दिखा UIImageView, लेकिन मुझे नहीं पता कि यह कैसे करना है।

Answer 1

हाँ यह संभव है।
आयात करें QuartzCore ( #import <QuartzCore/QuartzCore.h>) हेडर और की layerसंपत्ति के साथ खेलते हैं UIImageView।

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

अधिक जानकारी के लिए क्लेयर वर्ग संदर्भ देखें ।

Comments

ठीक है यह एक UIImageView के लिए काम करता है, लेकिन अगर मैं इस UIImageView को UIImage के अंदर रखूं तो यह काम नहीं करता, मैं कैसे हल कर सकता हूं?

— सायक्लिंगबेट्टर

सक्रिय करने के लिए मत भूलना clipToBounds। yourImageView.clipsToBounds = YES;

— यिनकौ

यदि ImageView स्क्रॉलव्यू या टेबल व्यू सेल के अंदर था, तो क्लिपटॉब खराब स्क्रॉल प्रदर्शन करता है।

— ओजबोज

मैं इस तरह से परीक्षण! स्मृति की बहुत लागत!

— LE SANG

मैंने स्विफ्ट 2.0 में इस कोड का उपयोग किया है, और यह ठीक से काम करता है, धन्यवाद। वैसे, मैंने हां को सच में बदल दिया है।

— lmiguelvargasf

Answer 2

राउंड इमेज इम्पोर्ट के लिए इस कोड को आज़माएं गोल इमेज बनाने के लिए क्वार्ट्जकोर फ्रेमवर्क को सरल तरीके से

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

Answer 3

उद्देश्य सी

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

स्विफ्ट 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
}

Comments

इमेज सेंटर पार्ट कैसे बनाये कर्व शेप स्लिम कैसे बनाये ये कॉन्सेप्ट कैसे संभव है प्लीज यार मुझे ऑब्जेक्टिव सी लैंग्वेज के लिए बताएं

— रमानी हितेश

Answer 4

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

#import <QuartzCore/QuartzCore.h>

Comments

यह अन्य उत्तरों से कैसे भिन्न है?

— mmmmmm

@ मर्क uiimageview.frame.size.height/2;इमेज को परफेक्ट राउंड शेप, फुल सर्कल बनाने के लिए असली रत्न है।

— Ans

आप uiimageview.frame.size.height / 2 के साथ कैसे आते हैं? क्या आप समझा सकते हैं?

— आइड्स अशरफ

@IdreesAshraf यहाँ शामिल एक साधारण तर्क .... आधी ऊंचाई की त्रिज्या शीर्ष मध्य से बाएं मध्य तक शुरू होगी। 45degree का चाप बनाना। तो 4 तरफ इस तरह के चाप होने से एक दृश्य सही चक्र बन जाएगा।

— Ans

@ अगर यह अलग चौड़ाई और ऊंचाई के साथ मेरी छवि है तो यह विफल हो जाएगा। आप कोशिश कर सकते हैं कि ..

— आइड्स अशरफ

Answer 5

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

Comments

ऐसा लगता है कि सीमा के माध्यम से छवि का थोड़ा सा खून बह रहा है। मुझे यकीन नहीं है कि अगर वहाँ के लिए एक आसान तय है ...

— जॉन गिब

सीमा में सुधार हुआ

— रोमन सोलोडैस्किन

Answer 6

सेटिंग 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
    }
}

Answer 7

छवि के गोल कोनों को प्राप्त करने के लिए इसे देखें और कोनों को रंगने के लिए भी:

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 की ऊंचाई और चौड़ाई समान होनी चाहिए।

Answer 8

1. layer.cornerRadius = imageviewHeight / 2

2. layer.masksToBounds = true

Answer 9

यह संभव है, लेकिन मैं आपको गोल कोनों के साथ पारदर्शी png छवि (मुखौटा) बनाने की सलाह दूंगा और इसे UIImageView के साथ छवि पर रखूंगा। यह तेज समाधान हो सकता है (उदाहरण के लिए यदि आपको एनिमेशन या स्क्रॉलिंग की आवश्यकता है)।

Answer 10

यहां मैंने अपने गोल अवतार को किस प्रकार केंद्र में रखा है, यह देखें:

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

Answer 11

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

Answer 12

# import QuartzCore framework
imageView.layer.cornerRadius=imgvwUser.frame.size.width/2;
imageView.layer.masksToBounds = YES;

गोल कोनों को प्राप्त करने के लिए imageView की ऊंचाई और चौड़ाई समान होनी चाहिए।