向圆形 UIImage 添加边框答案

【问题标题】：Add Border to circular UIImage向圆形 UIImage 添加边框
【发布时间】：2017-04-10 16:11:15
【问题描述】：

我一直在查看许多堆栈溢出帖子，但没有一个能够为我提供我想要的解决方案。到目前为止，我已经能够使用 AlamoFire 获取图像并将其转换为圆形。然而，不幸的是，alamo fire 没有提供向 UIImage 添加边框的选项。我想知道是否有人可以解决我的问题。这是我将图像制作成圆形的代码：

if let downloadedImage = UIImage(data: data!) {

   let markerImage = downloadedImage
   let markerImageSize = CGSize(width: 50, height: 50)
   let markerImageFilter = AspectScaledToFillSizeCircleFilter(size: markerImageSize)

   let finalMarkerImage = markerImageFilter.filter(markerImage)

   marker.icon = finalMarkerImage
}

如您所见，我可以得到一个圆圈，但不能得到一个有边框的圆圈。到目前为止，我已经尝试了许多堆栈溢出帖子解决方案来尝试使用我的 AlamoFire 解决方案。以下是一些帖子： Making a UIImage to a circle form

Cut a UIImage into a circle Swift(iOS)

这是我目前拥有的：

这就是我想要的：

任何帮助将不胜感激。谢谢！

【问题讨论】：

显示您想要的最终结果的图片。让尝试和帮助变得更容易很多。
stackoverflow.com/questions/20116472/… ?您想修改图像，还是只在您的应用中渲染它？
@DonMag 我刚刚添加了一张我所拥有和想要的照片。
@Larme 理想情况下，我只想将图像制作成带边框的圆圈。
只要设置你的UIImageView的圆角半径就是layer.borderColor

标签： ios swift google-maps uiimage

【解决方案1】：

我建议你应该对包含你的 UIImage 的 UIImageView 应用所需的外观，如下所示：

imageView.layer.cornerRadius = imageView.frame.size.width / 2
imageView.layer.masksToBounds = true
imageView.layer.borderWidth = 2
imageView.layer.borderColor = UIColor.brown.cgColor

更新：

由于您使用的是 Google 地图 (GMSMarker)，因此您应该以编程方式创建一个 UIImageView（将上面的代码 sn-p 应用于它）并将其添加到您的标记中，如 iconView，如下所示：

marker.iconView = imageView

所以，它应该类似于：

// of course the values of the width/height (size) is up to you
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
imageView.layer.cornerRadius = imageView.frame.size.width / 2
imageView.layer.masksToBounds = true
imageView.layer.borderWidth = 2
imageView.layer.borderColor = UIColor.white.cgColor

// set your image
imageView.image = ...

marker.iconView = imageView

【讨论】：

是的，我已经尝试过了，但问题是我无法将 UIImageView 添加到我的 marker.icon 值，因为该值必须是 UIImage。
是的，我正在使用谷歌地图，是的，我正在使用 GMSMarker
是否能够将UIImageView 添加到标记，检查更新:)
我试过这样做，但我现在正在解决这个错误：在初始化之前使用常量 imageView
非常感谢！！！长期以来一直在寻找这样的解决方案。再次感谢您！

【解决方案2】：

这应该创建带有白色边框的圆形图像......

func round(image: UIImage) -> UIImage {
    let imageWidth = image.size.width
    let imageHeight = image.size.height

    let diameter = min(imageWidth, imageHeight)
    let isLandscape = imageWidth > imageHeight

    let xOffset = isLandscape ? (imageWidth - diameter) / 2 : 0
    let yOffset = isLandscape ? 0 : (imageHeight - diameter) / 2

    let imageSize = CGSize(width: diameter, height: diameter)

    return UIGraphicsImageRenderer(size: imageSize).image { _ in

        let ovalPath = UIBezierPath(ovalIn: CGRect(origin: .zero, size: imageSize))
        ovalPath.addClip()
        image.draw(at: CGPoint(x: -xOffset, y: -yOffset))
        UIColor.white.setStroke()
        ovalPath.lineWidth = diameter / 50
        ovalPath.stroke()
    }
}

然后

let roundImage = round(image: downloadedImage)

【讨论】：

我知道我要问的问题可能很明显，但你能解释一下我将如何在我的代码中使用我的下载图像变量来实现你的解决方案
这是一个阳光明媚的好日子，所以我更新了我的答案，但实际上，您需要自己尝试找出其中的一些内容。

【解决方案3】：

对于那些在 obj-c 版本的@ashley 答案中苦苦挣扎的人。同理

+ (UIImage *)drawBorderToImage:(UIImage *)image withColor:(UIColor *)color andThickness:(CGFloat)thickness {
    CGFloat diameter = MIN(image.size.width, image.size.height);
    BOOL isLandscape = image.size.width > image.size.height;
    CGFloat xOffset = isLandscape ? (image.size.width - diameter) / 2 : 0;
    CGFloat yOffset = isLandscape ? 0 : (image.size.height - diameter) / 2;
    CGSize imageSize = CGSizeMake(diameter, diameter);
    UIGraphicsBeginImageContext(image.size);
    UIBezierPath *ovalPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
    [ovalPath addClip];
    [image drawAtPoint:CGPointMake(-xOffset, -yOffset)];
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(context, color.CGColor);
    ovalPath.lineWidth = thickness;
    [ovalPath stroke];
    UIImage *borderedImage =  UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return borderedImage;
}

【讨论】：