draw rounded lines iOS Swift

Question

Im trying to make an app which draws a fractal tree. I managed to make the code that generates all the start and end points from all the lines. I also managed to draw the lines but right now they are really boxy and want them to have rounded corners. I using a UIView and using UIBezierPaths to draw the lines inside the view draw function. To retrieve the points I have an array of Branch objects inside a sigleton class. A branch object has among other things a startingPoint and a ending point which are both tuples( (x: Double, y: Double) ).

    override func draw(_ rect: CGRect) {
    super.draw(rect)
    UIColor.blue.setStroke()
    for branch in Tree.shared.branches{
        let path = UIBezierPath()
        print(branch.startingPoint)
        print(branch.endingPoint)
        path.move(to: CGPoint(x: branch.startingPoint.x, y: branch.startingPoint.y))
        path.addLine(to: CGPoint(x: branch.endingPoint.x, y: branch.endingPoint.y))
        path.lineWidth = 3
        path.stroke()
    }

}

How could i make the corners rounded?

Also if someone knows a free library that could facilitate this Im also interested.

edit: Im not interested in how to generate the tree, I have done already done this part of the code I need help with drawing the lines.

score 1 · Accepted Answer · answered Feb 18 '19 at 20:00

You don't need a library, you just need to spend a little time learning how to draw curves with UIBezierPath, and curves are one of the things that that class is best at. A key to drawing curves is understanding how control points work. Here's an answer I wrote some time ago about how to smoothly connect curved lines, which I think will help. Play around with -addCurveToPoint:controlPoint1:controlPoint2:.

If you don't actually want curves, but really just want the corners to be rounded rather than pointy, then all you need to do is to set the lineJoinStyle to kCGLineJoinRound.

`lineJoinStyle` didn't( I guess because all lines are separate paths) but I used `lineCapStyle` and it worked, but is there anyway to control the "corner radius"? anyways thanks for the help. — PortalGamesMais, Feb 18 '19 at 20:08

score 0 · Answer 2 · answered Feb 18 '19 at 19:59

0

About rounded corners of some view, is just set the parameters below:

func adjustView(_ view: UIView){
     view.layer.borderWidth = 2.0
     view.layer.borderColor = UIColor.red
     view.layer.cornerRadius = 10
     view.clipsToBounds      = true
     view.backgroundColor = UIColor.white
    }

If you wish more information check the current documentation about layer property: https://developer.apple.com/documentation/uikit/uiview/1622436-layer

answered Feb 18 '19 at 19:59

Guilherme Pedriconi

54
6

Im trying to round the corners of the lines not of the view. – PortalGamesMais Feb 18 '19 at 20:01
Right. I found this answer from another issue may can be useful to you. https://stackoverflow.com/questions/13719143/draw-graph-curves-with-uibezierpath – Guilherme Pedriconi Feb 18 '19 at 20:09
I want to round only the the corners not the whole line. But I made it work using the lineCapStyle property of the UIBezierPath. – PortalGamesMais Feb 18 '19 at 20:12
I've found another approach using CAShapeLayer() and UIBezierPath(). But the commands is instantiate inside a view. May you can just check the parameters. https://stackoverflow.com/questions/32031633/uibezierpath-how-to-add-a-border-around-a-view-with-rounded-corners – Guilherme Pedriconi Feb 18 '19 at 20:28

draw rounded lines iOS Swift

2 Answers2