开发者

Easiest Way to Put a Circular Frame Around a UIImage

I'm trying to make a cool effect for one the of the apps I'm building, and would rather not muck around with the drawRect function. Can you guys think of a simple way to put a nice circular border around a UIImage? It should look something like a round picture frame.

Here's what I'm using so far:

CGFloat radius = self.layer.bounds.size.width / 2;

    CAShapeLayer *mask = [CAShapeLayer layer];
    mask.frame = self.layer.bounds;
    [mask setFillColor:[[UIColor whiteColor] CGColor]];

    CGFloat width = self.layer.bounds.size.width;
    CGFloat height = self.layer.bounds.size.height;
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, width, 0);
    CGPathAddLineToPoint(path, NULL, width, height - radius);
    CGPathAddCurveToPoint(path, NULL, width, height, width - radius, height, width - radius, height);
    CGPathAddLineToPoint(path, NULL, 0, height);
    CGPathAddLineToPoint(path, NULL, 0, radius);
    CGPathAddCurveToPoint(path, NULL, 0, 0, radius, 0, radius, 0);
    CGPathCloseSubpath(path);
    [mask setPath:path];
    CGPathRelease(path);

    self.layer.mask = mask; 

    [self setNeedsDisplay];

My UIImage is encapsulated in a UIView (self is a UIView). I'm expec开发者_StackOverflow中文版ting it to draw a circle around my UIView.


Probably the best way to do it is using QuartzCore.

Basically you'd need to include the QuartzCore framework and then create a UIView to put your image in, then round it's corners and set it's clipsToBounds property to YES.

Example:

#include <QuartzCore/QuartzCore.h>

//More code stuff

UIView *newView = [[UIView alloc] initWithFrame:frame];
newView.clipsToBounds = YES;
newView.layer.cornerRadius = 10;
[newView addSubview:imageView];


You can use a mask on the layer of the UIImageView, or just set the corner radius to half the height. In either case be sure to #import <QuartzCore/QuartzCore.h>

myImageView.layer.cornerRadius = myImageView.bounds.size.width / 2;

Example mask to make two rounded corners (change to make it a circle instead):

+ (void) applyTwoCornerMask: (CALayer *) layer withRadius: (CGFloat) radius {
    CAShapeLayer *mask = [CAShapeLayer layer];
    mask.frame = layer.bounds;
    [mask setFillColor:[[UIColor blackColor] CGColor]];

    CGFloat width = layer.bounds.size.width;
    CGFloat height = layer.bounds.size.height;
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, width, 0);
    CGPathAddLineToPoint(path, NULL, width, height - radius);
    CGPathAddCurveToPoint(path, NULL, width, height, width - radius, height, width - radius, height);
    CGPathAddLineToPoint(path, NULL, 0, height);
    CGPathAddLineToPoint(path, NULL, 0, radius);
    CGPathAddCurveToPoint(path, NULL, 0, 0, radius, 0, radius, 0);
    CGPathCloseSubpath(path);
    [mask setPath:path];
    CGPathRelease(path);

    layer.mask = mask;  
}


How about the following approach: Use a second UIImageView that is on top of the original that has the image you want framed. This second UIImageView has a stretchable version of your picture frame image, so that your picture frame can change if the original image changes size.

Not easily reusable, but it would be simple.

You would use the stretchableImageWithLeftCapWidth method of UIImage to create the stretchable version of the picture frame image.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜