沿圆形 UIImage 添加白色边框答案

【问题标题】：adding white border along a circle UIImage沿圆形 UIImage 添加白色边框
【发布时间】：2013-10-31 09:09:53
【问题描述】：

我使用下面的掩码生成了一个圆形 UIImage（其中 masked_circle 是一个黑色圆圈）：

CGContextRef context = UIGraphicsGetCurrentContext();
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    UIImage *maskImage = [UIImage imageNamed:@"masked_circle.png"];
    CGImageRef maskImageRef = [maskImage CGImage];

    // create a bitmap graphics context the size of the image
    CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);

    CGFloat ratio = 0;
    ratio = maskImage.size.width/ self.image_.size.width;

    if(ratio * self.image_.size.height < maskImage.size.height) {
        ratio = maskImage.size.height/ self.image_.size.height;
    }

    CGRect rect1  = {{0, 0}, {maskImage.size.width, maskImage.size.height}};
    CGRect rect2  = {{-((self.image_.size.width*ratio)-maskImage.size.width)/2 , -((self.image_.size.height*ratio)-maskImage.size.height)/2}, {self.image_.size.width*ratio, self.image_.size.height*ratio}};

    CGContextClipToMask(mainViewContentContext, rect1, maskImageRef);
    CGContextDrawImage(mainViewContentContext, rect2, self.image_.CGImage);

    CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext);
    CGContextRelease(mainViewContentContext);

    UIImage *theImage = [UIImage imageWithCGImage:newImage];

现在我想在圆形图像周围添加一个 1px 的白色边框，我该怎么做？

【问题讨论】：

UIImage 会在 UIImageView 中还是要在 UIImage 中绘制实际边框？
想在 UIImage 本身中绘制实际边框

标签： iphone objective-c ios ipad

【解决方案1】：

这是一个更简单的解决方案，可以将任何视图，尤其是 UIImageView 转换为具有不同大小和颜色边框的圆圈。这当然假设您正在处理像图标这样的方形图像。

#import <UIKit/UIKit.h>

@interface UIView (Shapes)
- (void)makeCircle;
- (void)makeCircleWithBorderColor:(UIColor *) color Width:(CGFloat) width;
@end


@implementation UIView (Shapes)

- (void)makeCircle {
    CALayer *lyr = self.layer;
    lyr.masksToBounds = YES;
    lyr.cornerRadius = self.bounds.size.width / 2; // assumes image is a square
}

- (void)makeCircleWithBorderColor:(UIColor *) color Width:(CGFloat) width {
    [self makeCircle];
    CALayer *lyr = self.layer;
    lyr.borderWidth = width;
    lyr.borderColor = [color CGColor];
}
@end

【讨论】：

不需要创建 *lyr，您可以直接使用 self.layer ，+1 为简单起见。

【解决方案2】：

这里有一些代码可以在具有圆角半径的框架周围绘制边框。使半径等于一半大小，你就有了一个圆！

CGFloat strokeWidth =1.0;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, strokeWidth);
CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);

CGFloat radius = 7.0;
CGRect rrect = self.bounds;
rrect.size.width = rrect.size.width - strokeWidth*2;
rrect.size.height = rrect.size.height - strokeWidth*2;
rrect.origin.x = rrect.origin.x + (strokeWidth / 2);
rrect.origin.y = rrect.origin.y + (strokeWidth / 2);
CGFloat width = CGRectGetWidth(rrect);
CGFloat height = CGRectGetHeight(rrect);

if (radius > width/2.0)
    radius = width/2.0;
if (radius > height/2.0)
    radius = height/2.0;   

CGFloat minx = CGRectGetMinX(rrect);
CGFloat midx = CGRectGetMidX(rrect);
CGFloat maxx = CGRectGetMaxX(rrect);
CGFloat miny = CGRectGetMinY(rrect);
CGFloat midy = CGRectGetMidY(rrect);
CGFloat maxy = CGRectGetMaxY(rrect);
CGContextMoveToPoint(context, minx, midy);
CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);

【讨论】：