iOS-使UIImage在按钮内变圆

Question

Everybody loves them some round profile images these days. So I guess I do too. With that said...

I have a UIImage set as the background image of a UIButton. What I need to do is make the profile picture completely rounded. Here's my code ... can anyone point me in the right direction?

NSString* photoUrl = [NSString stringWithFormat:@"%@%@", URL_IMAGE_BASE, photoFileName];
NSURL *myurl2 = [NSURL URLWithString: photoUrl];
UIImage *image = [UIImage imageWithData: [NSData dataWithContentsOfURL:myurl2]];
[_goToProfileEditButton setImage:image forState:UIControlStateNormal];
[_goToProfileEditButton setBackgroundImage:image forState:UIControlStateNormal];

Answer 1

Make the button a perfect square (same width/height) and use the cornerRadius property of the button layer and set it to be exactly half its width/height. You need to import the QuartzCore header to be able to access the layer property.

Answer 2

What you could do is subclass UIView and override the drawRect: method like so:

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, rect);
    CGContextAddEllipseInRect(context, rect);
    CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);
    CGContextFillPath(context);
}

Set the view's clipsToBounds property to YES and add your image view as a subview of your subclassed UIView . Otherwise you could look into masking with an image via CGImageMaskCreate .

Answer 3

bolivia's answer is the best if you are happy to mask the button itself.

If you want to create a circle image from a square, then you can do that with a clipping mask. It should be something like as follows:

// start with the square image, from a file, the network, or wherever...
UIImage * squareImage = [UIImage imageNamed:@"squareImage.png"];
CGRect imageRect = CGRectMake(0, 0, squareImage.size.width, squareImage.size.height);
UIGraphicsBeginImageContextWithOptions(imageRect.size,NO,0.0);
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:imageRect.size.width/2.0f];
[path addClip];
[squareImage drawInRect:imageRect];
UIImage *circleImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// now circleImage contains the circle in the center of squareImage