CODEWITHSUNDEEP
iosswiftuibezierpath
user3599895
user3599895

Reputation: 275

UIBezierPath with multiple paths not joining lines with bevel type

Probably a simple bug, but I can't figure out what's going on.

I have 3 UIBezierPaths that I am merging into 1. I want either end of the path to have a rounded edge, with the middle path to have a bevel lineJoinStyle. However, the last path seems to have a rounded lineJoinStyle which I can't seem to fix.

Here is an image of what I mean.

enter image description here

Here is the code I'm using:

    override func draw(_ rect: CGRect) {

        let leftQuarterPoint: CGPoint = CGPoint(x: 15, y: rect.height / 2)
        let rightQuarterPoint: CGPoint = CGPoint(x: (rect.width - (rect.width / 4)), y: rect.height / 2)
        let leftPath = UIBezierPath()
        leftPath.move(to: leftQuarterPoint)
        let firstPoint = CGPoint(x: rect.width / 4, y: rightQuarterPoint.y)
        Global.Colors.red.setStroke()

        leftPath.addCurve(to: firstPoint, controlPoint1: CGPoint(x: leftQuarterPoint.x, y: rightQuarterPoint.y), controlPoint2: CGPoint(x: firstPoint.x, y: firstPoint.y))
        leftPath.lineWidth = 20
        leftPath.lineCapStyle = .round
        leftPath.stroke()


        let middlePath = UIBezierPath()

        Global.Colors.orange.setStroke()
        middlePath.move(to: leftPath.currentPoint)
        middlePath.addCurve(to: rightQuarterPoint, controlPoint1: CGPoint(x: rect.width / 2, y: rect.height / 2), controlPoint2: CGPoint(x: rect.width / 2, y: rect.height / 2))
        middlePath.lineWidth = 20
        middlePath.lineCapStyle = .square
        middlePath.lineJoinStyle = .bevel
        middlePath.stroke()


        let rightPath = UIBezierPath()
        Global.Colors.green.setStroke()

        rightPath.move(to: middlePath.currentPoint)

        rightPath.addCurve(to: CGPoint(x: rect.width - 15, y: (rect.height / 2)), controlPoint1: CGPoint(x: rightQuarterPoint.x, y: rightQuarterPoint.y), controlPoint2: CGPoint(x: rect.width-15, y: rect.height / 2))
        rightPath.lineWidth = 20
        rightPath.lineCapStyle = .round
        rightPath.lineJoinStyle = .bevel
        rightPath.stroke()

        let path = UIBezierPath()


        path.append(leftPath)
        path.append(middlePath)
        path.append(rightPath)


        path.lineWidth = 20

    }

Sorry if I'm missing something simple.

Upvotes: 1

Views: 211

Answers (2)

Ahsan Ali
Ahsan Ali

Reputation: 124

Your right path is overlapping the middle one. just start drawing of the right path after the middle one is over. Replace rightPath.move with this line. 15 will be the value that you want to start drawing the right path.

rightPath.move(to: CGPoint(x: middlePath.currentPoint.x + 15, y: middlePath.currentPoint.y))

Upvotes: 3

farhad
farhad

Reputation: 430

Removing these lines from the code and adding them to the end of the draw func will work for you, the reason is side paths are rounded but they have overlap with the middle one so if you drow sides first and then draw the middle one it will hide the round corners.

override func draw(_ rect: CGRect) {

       ...

        Global.Colors.green.setStroke()
        rightPath.stroke()

        Global.Colors.red.setStroke()
        leftPath.stroke()

        Global.Colors.orange.setStroke()
        middlePath.stroke()
}

Upvotes: 4

Related Questions