将边框添加到圆形UIImage

时间:2017-04-10 16:11:16

标签: ios swift google-maps uiimage

我一直在寻找许多堆栈溢出帖子,但没有人能够给我我想要的解决方案。到目前为止,我已经能够使用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)

以下是我目前的情况:

enter image description here

这就是我想要的:

enter image description here

非常感谢任何帮助。谢谢!

3 个答案:

答案 0 :(得分:3)

我建议您将所需的外观应用于包含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(将上面的代码段应用到它)并将其作为iconView添加到您的标记中,如下所示:< / p>

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

答案 1 :(得分: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)

enter image description here

答案 2 :(得分:0)

适用于在@ashley答案的obj-c版本中苦苦挣扎的人们。逻辑相同

+ (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;
}