【问题标题】:How to create a circular image with border (UIGraphics)?如何创建带边框的圆形图像(UIGraphics)?
【发布时间】:2014-08-22 14:00:21
【问题描述】:

如何创建带边框的圆形图片(UIGraphics)?

附:我需要画一幅画。

viewDidLoad中的代码:

NSURL *url2 = [NSURL URLWithString:@"http://images.ak.instagram.com/profiles/profile_55758514_75sq_1399309159.jpg"];
NSData *data2 = [NSData dataWithContentsOfURL:url2];
UIImage *profileImg = [UIImage imageWithData:data2];

UIGraphicsEndImageContext();
// Create image context with the size of the background image.
UIGraphicsBeginImageContext(profileImg.size);
[profileImg drawInRect:CGRectMake(0, 0, profileImg.size.width, profileImg.size.height)];

// Get the newly created image.
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();

// Release the context.
UIGraphicsEndImageContext();

// Set the newly created image to the imageView.
self.imageView.image = result;

【问题讨论】:

  • 以上代码的输出是什么?
  • 最简单的方法是修改imageView而不是image。它当然可以修改图像,但修改 imageView 的 .borderColor、.borderWidth、.cornerRadius 和 .maskToBounds 属性要容易得多...
  • @DavidDoyle 我需要画一幅画。 borderWidth不适合
  • @SpaceInvader,为什么cornerRadiusborderWidth 不适合? ://

标签: ios objective-c uigraphicscontext


【解决方案1】:

听起来您想将图像剪辑成一个圆圈。这是一个例子:

static UIImage *circularImageWithImage(UIImage *inputImage,
    UIColor *borderColor, CGFloat borderWidth)
{

    CGRect rect = (CGRect){ .origin=CGPointZero, .size=inputImage.size };

    UIGraphicsBeginImageContextWithOptions(rect.size, NO, inputImage.scale); {

        // Fill the entire circle with the border color.
        [borderColor setFill];
        [[UIBezierPath bezierPathWithOvalInRect:rect] fill];

        // Clip to the interior of the circle (inside the border).
        CGRect interiorBox = CGRectInset(rect, borderWidth, borderWidth);
        UIBezierPath *interior = [UIBezierPath bezierPathWithOvalInRect:interiorBox];
        [interior addClip];

        [inputImage drawInRect:rect];

    }

    UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return outputImage;
}

结果:

【讨论】:

  • 你能发布快速版本吗?谢谢
  • Objective-C 版本的哪个部分你有理解困难?
  • 好奇为什么使用 c 方法名而不是 OC 方法名?
【解决方案2】:

你试过了吗?

self.imageView.layer.borderColor = [UIColor greenColor].CGColor;
self.imageView.layer.borderWidth = 1.f;

你还需要

self.imageView.layer.corderRadius = self.imageView.frame.size.width/2;
self.imageView.clipsToBounds = YES;

【讨论】:

  • OP 在 cmets 中对 .borderColor.borderWidth 不合适的问题说。
  • 看起来 OP 想要一个圈子里的头像。我敢打赌,使用borderColor 和cornderRadius 是最简单和最常见的解决方案。除非有一些超级自定义绘图需要,因为代码在 viewDidLoad 中,它看起来不像,否则应该可以正常工作。
【解决方案3】:

Swift 4 版本

extension UIImage {

    func circularImageWithBorderOf(color: UIColor, diameter: CGFloat, boderWidth:CGFloat) -> UIImage {
         let aRect = CGRect.init(x: 0, y: 0, width: diameter, height: diameter)
         UIGraphicsBeginImageContextWithOptions(aRect.size, false, self.scale)

         color.setFill()
         UIBezierPath.init(ovalIn: aRect).fill()

         let anInteriorRect = CGRect.init(x: boderWidth, y: boderWidth, width: diameter-2*boderWidth, height: diameter-2*boderWidth)
         UIBezierPath.init(ovalIn: anInteriorRect).addClip()

         self.draw(in: anInteriorRect)

         let anImg = UIGraphicsGetImageFromCurrentImageContext()!
         UIGraphicsEndImageContext()

         return anImg
     }
}

【讨论】:

    猜你喜欢
    • 2015-05-26
    • 2017-10-31
    • 2023-04-08
    • 2015-09-28
    • 1970-01-01
    • 2018-02-02
    • 1970-01-01
    • 2021-03-04
    • 1970-01-01
    相关资源
    最近更新 更多