0

I wanted to draw a triangle with rounded corners in my app. I already created a triangle like this:

Example

How can I round the corners of this triangle?

Here is my code:

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 160, y: 90))
path.addLine(to: CGPoint(x: 0, y: 180))
path.close()
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
triangleView.layer.mask = triangleLayer

Thanks for any kind of help :D

thatmarcel
  • 388
  • 3
  • 15
  • Is there a reason you are not using an image instead? – nathangitter Nov 07 '17 at 18:19
  • You would have to add a bezier curve to the corners... – Sulthan Nov 07 '17 at 18:40
  • Yeah @nathan, I could use an image but that would enlarge the size of my app and is not very flexible. – thatmarcel Nov 07 '17 at 18:41
  • @Sulthan Could you give an example please? :) – thatmarcel Nov 07 '17 at 18:42
  • You can insert arbitrary arcs into your path with https://developer.apple.com/documentation/uikit/uibezierpath/1624367-addarc. For your needs this is a little bit complicate. You have to compute the angels and center points of the arcs, and the new start and end points of the lines. – clemens Nov 07 '17 at 18:44
  • @Gamecraftler I would recommend using an image. Your app payload would be larger — but by an insignificant amount. What do you mean by not flexible? Are you planning on animating the shape's path? – nathangitter Nov 07 '17 at 18:47
  • @nathan I mean, when I want to change the aspect ratio or something else, I'd have to go to photoshop, change it, and reload it in my app. – thatmarcel Nov 07 '17 at 18:49
  • @Gamecraftler Use the workflow that's best for you. Just so you know, to get rounded corners you're going to have to add a lot more code, which will become more difficult to modify as it grows in complexity. Going back and forth between a design tool and Xcode is much easier in my experience. – nathangitter Nov 07 '17 at 19:19

0 Answers0