How to make UIImage round

Question

I am trying to make the annotation.image round. But I don't know how. How would i go about making a UIImage round.

 //Customize Annotation
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {

    let annotationIdentifier = "Identifier"

    var annotationView: MKAnnotationView! = mapView.dequeueReusableAnnotationView(withIdentifier: annotationIdentifier)

    if annotationView != nil {
        annotationView.annotation = annotation
    } else {
        annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier)


        annotationView.image = profileImage.image

        annotationView.canShowCallout = true
        annotationView.frame = CGRect(x: 0, y: 0, width: 25, height: 25)

        annotationView.autoresizesSubviews = true
        annotationView.rightCalloutAccessoryView = UIButton(type: UIButtonType.detailDisclosure) as UIView
    }


      return annotationView
}

}

Currently looks like this on a map

score 1 · Answer 1 · answered Jun 03 '17 at 23:49

1

You should play around with the cornerRadius property. It will be something like:

annotationView.layer.cornerRadius = yourCornerRadius

If you set the yourCornerRadius as half of height or width of the annotationView you should get a round annotationView.

If that doesn't works add this line too

annotationView.layer.maskToBounds = true

answered Jun 03 '17 at 23:49

Matias Jurfest

1,378
16
25

Tried it. But I got this error when I set maskToBound to true --> clipsToBounds = YES; layer = > cannot show callout with clipsToBounds enabled' *** First throw call stack: – JoseMelendez Jun 03 '17 at 23:56

score 0 · Answer 2 · answered Jun 04 '17 at 00:34

0

How about adding imageView?

let imageView = UIImageView(frame: CGRectMake(0, 0, 25, 25))
imageView.image = UIImage(named: "image.png");
imageView.layer.cornerRadius = imageView.layer.bounds.size.width / 2
imageView.layer.masksToBounds = true
annotationView.addSubview(imageView)

answered Jun 04 '17 at 00:34

nelsonK

21
4

What would I put for the UIImage(named: ) ...? I – JoseMelendez Jun 04 '17 at 01:12
@JoseMelendez It can be `profileImage.image` here – nelsonK Jun 04 '17 at 01:19
I am not getting any errors but it still not working. Image is still squared. – JoseMelendez Jun 04 '17 at 01:32
Your solution helped me the most. What I was doing wrong was that I had the annotationView.image set to profile.image. All I had to do was delete that. Thanks! – JoseMelendez Jun 04 '17 at 17:57

score 0 · Answer 3 · answered Jun 04 '17 at 01:54

0

Try this method:

func getRoundedImage(originalImage: UIImage,view: UIView,radius:CGFloat,borderWidth:CGFloat) -> UIImage?{
        UIGraphicsBeginImageContextWithOptions(view.frame.size, false, 0)
        let path = UIBezierPath(roundedRect: view.bounds.insetBy(dx: borderWidth / 2, dy: borderWidth / 2), cornerRadius: radius)
        let context = UIGraphicsGetCurrentContext()
        context!.saveGState()
        path.addClip()
        originalImage.draw(in: view.bounds)
        UIColor.gray.setStroke()
        path.lineWidth = borderWidth
        path.stroke()
        let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return roundedImage

    }

answered Jun 04 '17 at 01:54

JP Aquino

3,946
1
23
25

What do i put for the view paramater? – JoseMelendez Jun 04 '17 at 02:10
Can you try this line? -- annotationView.image = getRoundedImage(originalImage: profileImage.image, view: annotationView, radius: self.annotationView.frame.width/2, borderWidth: 1.0) -- in place of annotationView.image = profileImage.image – JP Aquino Jun 04 '17 at 02:27
it finds nil when it unwraps this context!.saveGState() in the function. – JoseMelendez Jun 04 '17 at 03:06

Victor Apeland · Answer 4 · 2018-10-16T09:25:53.737

0

To make a square a circle, just set its corner radius to half its width/height.

imageView.layer.cornerRadius = 12.5 //Half the sideLength of the imageView
imageView.layer.masksToBounds = true

edited Oct 16 '18 at 09:25

answered Jun 04 '17 at 07:23

Victor Apeland

110
1
10

How to make UIImage round

4 Answers4