Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add corner radius to a UIBezier Path Arc

I am creating an arc using UIBezierPath arc convenience method. I want the ends of the arc to be rounded off - see attached sketch for exact requirement! The cornerRadius option used in the roundedRect version isn't available for the arc method. Anyone got an ideas on how to achieve this? Thanks in advance. (This is different to previously asked question in that it provides exact requirement)

 let center = CGPoint(x:bounds.width/2, y: bounds.height/2)
 let radius: CGFloat = max(bounds.width, bounds.height)
 let arcWidth: CGFloat = 10
 let startAngle: CGFloat = 4.6 / 3 * π
 let endAngle: CGFloat = 4.4 / 3 * π

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

 path.lineWidth = arcWidth
 // all thats needed to make the ends rounded is
 path.lineCapStyle = .Round
 path.stroke()

enter image description here

like image 854
richc Avatar asked Mar 02 '16 10:03

richc


People also ask

What is a UIBezierPath object?

A UIBezierPath object combines the geometry of a path with attributes that describe the path during rendering. You set the geometry and attributes separately and can change them independent of one another. After you have the object configured the way you want it, you can tell it to draw itself in the current context.

How do I draw a béZier path?

After configuring the geometry and attributes of a Bézier path, you draw the path in the current graphics context using the stroke () and fill () methods. The stroke () method traces the outline of the path using the current stroke color and the attributes of the Bézier path object.

Can I use béZier path objects multiple times?

Because the creation, configuration, and rendering process are all distinct steps, Bézier path objects can be reused easily in your code. You can even use the same object to render the same shape multiple times, perhaps changing the rendering options between successive drawing calls.

How do I Close a subpath in béZier?

A single Bézier path object can contain any number of open or closed subpaths, where each subpath represents a connected series of path segments. Calling the close () method closes a subpath by adding a straight line segment from the current point to the first point in the subpath.


1 Answers

Solution

What actually does the trick is lineCap property. You can use the code below.

func drawCircle(view: UIView, startingAngle: CGFloat, endAngle: CGFloat) -> CAShapeLayer {
    let path = UIBezierPath(arcCenter: view.center, radius: CGFloat((view.bounds.size.height/2) - 10), startAngle: startingAngle, endAngle:endAngle, clockwise: true)

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.CGPath

    shapeLayer.strokeColor = UIColor.blackColor().CGColor
    shapeLayer.lineWidth = 10.0
    shapeLayer.fillColor = UIColor.clearColor().CGColor
    shapeLayer.lineCap = kCALineCapRound

    view.layer.addSublayer(shapeLayer)

    return shapeLayer
}

Result

enter image description here

like image 95
E-Riddie Avatar answered Sep 26 '22 13:09

E-Riddie