Add Border to circular UIImage

Question

I have been looking at many stack overflow posts but none have them have been able to give me my desired solution. So far I have been able to get an image and convert it into a circle using AlamoFire. However, unfortunately alamo fire does not provide an option to add a border to a UIImage. I was wondering if anyone had a solution to my problem. Here is my code for making the image into a circle:

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
}

As you can see I am able to get a circle but not one with a border. So far I have tried many stack overflow post solutions to try and work with my AlamoFire solution. Here are some of the posts: Making a UIImage to a circle form

Cut a UIImage into a circle Swift(iOS)

Here is what I currently have:

Here is what I want:

Any help would be much appreciated. Thanks!

Show a picture of what you want as an end result. Makes it a *lot* easier to try and help. — DonMag, Apr 10 '17 at 16:16
http://stackoverflow.com/questions/20116472/draw-a-simple-circle-uiimage ? You want to modify the image, or just render it in your app? — Larme, Apr 10 '17 at 16:17
@DonMag I have just added a picture of what I have and what I want. — Rohan Vasishth, Apr 10 '17 at 16:20
@Larme I would ideally simply like to make the image into a circle with a border. — Rohan Vasishth, Apr 10 '17 at 16:21
Just set your `UIImageView`'s corner radius and it's `layer.borderColor` — Ashley Mills, Apr 10 '17 at 16:21
@AshleyMills Well thats the whole problem. The image is a UIImage not a UIImageView — Rohan Vasishth, Apr 10 '17 at 16:22
Possible duplicate of [Rounding UIImage and adding a border](http://stackoverflow.com/questions/34984966/rounding-uiimage-and-adding-a-border) — Larme, Apr 10 '17 at 16:24
@Larme, I disagree becuase none of those solutions worked for me — Rohan Vasishth, Apr 10 '17 at 16:25
The Image is not put in an image view it is set as a google maps marker icon which requires a value of an UIImage — Rohan Vasishth, Apr 10 '17 at 16:46

Ashley Mills · Answer 1 · 2017-04-10T16:57:52.040

This should create round image with white border…

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()
    }
}

Then

let roundImage = round(image: downloadedImage)

I know what I am about to ask is probably obvious but can you explain how I would use implement your solution in my code with my variable of downloadedImage — Rohan Vasishth, Apr 10 '17 at 16:57
It's a nice sunny day here, so I've updated my answer, but really, you need to try and figure some of this stuff out for yourself. — Ashley Mills, Apr 10 '17 at 17:00

Ahmad F · Accepted Answer · 2017-04-10T17:02:11.820

5

I would suggest that you should apply the required appearance to the UIImageView that contains your UIImage, as follows:

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

Update:

Since you are working with Google Maps (GMSMarker), you should create an UIImageView programmatically (apply the above code snippet to it) and add it to your marker as iconView, as follows:

marker.iconView = imageView

So, it should be similar to:

// 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

edited Apr 10 '17 at 17:02

answered Apr 10 '17 at 16:47

Ahmad F

30,560
17
97
143

yes, I have tried this but the problem is that I can't add a UIImageView to my marker.icon value as the value has to be a UIImage. – Rohan Vasishth Apr 10 '17 at 16:48
Yes, I am using google maps, and yes I am using GMSMarker – Rohan Vasishth Apr 10 '17 at 16:51
Are are able to add a `UIImageView` to the marker, check the update :) – Ahmad F Apr 10 '17 at 16:59
I tried doing so but I am right now working through this error: constant imageView is used before initialized – Rohan Vasishth Apr 10 '17 at 17:02
Thank You SO MUCH!!! Have been searching for a solution like this for a long time. Thank you again! – Rohan Vasishth Apr 10 '17 at 17:11
Glad to help :) – Ahmad F Apr 10 '17 at 17:12

Oleg G. · Answer 3 · 2019-03-19T22:03:14.043

for people struggling with the obj-c version of @ashley answer. Same logic

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

Add Border to circular UIImage

3 Answers3