Search code examples
swiftuibezierpath

iOS - Setting lineJoinStyle to .round for UIBezierpath does not work (SWIFT)


My code is this:

let myPath = UIBezierPath()
myPath.lineJoinStyle = .round
let rect = bounds
myPath.move(to: CGPoint(x: rect.maxX * 0.05, y: rect.midY))
myPath.addCurve(to: CGPoint(x: rect.maxX / 3, y: rect.maxY / 10),
                controlPoint1: CGPoint(x: rect.midX/5, y: rect.midY/2),
                controlPoint2: CGPoint(x: rect.midX/3, y: rect.midY/3))
myPath.addQuadCurve(to: CGPoint(x: rect.maxX * 2/3, y: rect.maxY / 5),
                    controlPoint: CGPoint(x: rect.maxX * 0.6, y: rect.maxY / 4))

But still first and second curves joint point is not round. What should I do to make it round and smooth?

Here is result image:

Result Image


Solution

  • Here As per your expectation https://prnt.sc/sgmyp6 i have used addQuadCurve function to make a curve.

    took a UIView with Height = 200 And Width = 300

    @IBOutlet weak var centerView: UIView!
    
     override func viewDidLoad() {
            super.viewDidLoad()
            let centerViewW = centerView.frame.size.width. //Width Of your view
            let centerViewH = centerView.frame.size.height //Height Of your view
    
            let myPath: UIBezierPath = UIBezierPath()
            let drawingLayer = CAShapeLayer()
            drawingLayer.strokeColor =  UIColor.red.cgColor
            drawingLayer.fillColor = UIColor.clear.cgColor
            drawingLayer.lineWidth = 4.0
    
            //This is starting point from where you start drawing
            myPath.move(to: CGPoint(x: 0, y: centerViewH-25))
    
            //This is First Curve
            myPath.addQuadCurve(to: CGPoint(x: ((centerViewW/2)+10), y: (centerViewH/3+15)), controlPoint: CGPoint(x: 40, y: 20))
    
            drawingLayer.path = myPath.cgPath
            centerView.layer.addSublayer(drawingLayer)
    
            //This is Second Curve
            myPath.addQuadCurve(to: CGPoint(x: centerViewW, y: (centerViewH/2)), controlPoint: CGPoint(x: (centerViewW - 45), y: (centerViewH/2)+40))
    
            drawingLayer.path = myPath.cgPath
            centerView.layer.addSublayer(drawingLayer)
    }
    

    You just have to update/change the control points to match the slopes of lines.

    Output:-

    enter image description here