CODEWITHSUNDEEP
iosswift
Gugulethu
Gugulethu

Reputation: 1436

Adding curves to the ends of a UIBezierPath(arcCentre)

I have the following code added in the drawRect function of a UIView creating the following attached green arc.

Is there a way I can make the edges at the ends of the curve to look like the red arc rounded edges in the smaller image attached.

[![//Draw the Interior
        let center = CGPoint(x: bounds.width/2,
            y: bounds.height/2)

        //Calculate the radius based on the max dimension of the view.
        let radius = max(bounds.width, bounds.height)

        //Thickness of the Arc
        let arcWidth: CGFloat = 76

        //Start and End of Circle angle
        let startAngle: CGFloat = 3 * π/4
        let endAngle: CGFloat = π/4

        let path = UIBezierPath(arcCenter: center, radius: radius/2 - arcWidth/2,
            startAngle: startAngle,
            endAngle: endAngle,
            clockwise: true)

        path.lineWidth  = arcWidth
        counterColor.setStroke()
        path.stroke()]

enter image description here enter image description here

Upvotes: 0

Views: 558

Answers (1)

Martin R
Martin R

Reputation: 539845

Set the lineCapStyle property of the bezier path to .Round:

A line with a rounded end. Quartz draws the line to extend beyond the endpoint of the path. The line ends with a semicircular arc with a radius of 1/2 the line’s width, centered on the endpoint.

path.lineCapStyle = .Round

Upvotes: 1

Related Questions