Swift - How to get Rounded Cap on CAShapeLayer or UIBezierPath(ovalInRect: ovalRect)

ios swift uibezierpath rounded-corners cashapelayer
Marco Nascimento picture Marco Nascimento · Aug 1, 2016 · Viewed 6.9k times · Source

I have these 2 functions bellow in my class which extends CAShapeLayer, but I can't get an arc with rounded end caps every time I draw the path. It looks always like this picture:

enter image description here

I already tried using kCALineCapRound with no success. Any ideas?

self.lineShape.lineCap = kCALineCapRound;

self.lineShape.lineJoin = kCALineJoinRound;

  private func mask() {
    let maskLayer = CAShapeLayer()
    maskLayer.bounds = self.bounds
    let ovalRect = self.hollowRect
    let path =  UIBezierPath(ovalInRect: ovalRect)
    path.appendPath(UIBezierPath(rect: maskLayer.bounds))
    maskLayer.path = path.CGPath
    maskLayer.lineShape.lineCap = kCALineCapRound;
    maskLayer.lineShape.lineJoin = kCALineJoinRound;
    maskLayer.position = self.currentCenter
    maskLayer.fillRule = kCAFillRuleEvenOdd
    self.mask = maskLayer
  }

  private func drawTrack(ctx: CGContext) {
    let adjustDegree = Math.adjustDegree(self.setting.startAngle, degree: self.degree)
    let centerX = self.currentCenter.x
    let centerY = self.currentCenter.y
    let radius = min(centerX, centerY)
    CGContextSetFillColorWithColor(ctx, self.setting.trackingColor.CGColor)
    CGContextSetLineCap(ctx, CGLineCap.Round)
    CGContextBeginPath(ctx)
    CGContextMoveToPoint(ctx, centerX, centerY)
    CGContextAddArc(ctx, centerX, centerY, radius,
      CGFloat(Math.degreesToRadians(self.setting.startAngle)),
      CGFloat(Math.degreesToRadians(adjustDegree)), 0)
    CGContextClosePath(ctx);
    CGContextFillPath(ctx);
  }

Answer

matt picture matt · Aug 1, 2016

If this is a shape layer, you just say myShapeLayer.lineCap = "round". (I'm mystified by your mask and draw code, which has nothing to do with a shape layer, so I don't see how that's supposed to fit in.)

This is a shape layer with a circular path:

enter image description here

Related questions

Using UIBezierPath:byRoundingCorners: with Swift 2 and Swift 3

I'm using this code to make 2 corners of a button rounded. let buttonPath = UIBezierPath(roundedRect: button.bounds, byRoundingCorners: .TopLeft | .BottomLeft, cornerRadii: CGSizeMake(1.0, 1.0)) It throws an error: binary operator '|' cannot be applied to two UIRectCorner operands. How do I …

Read More
An easy way to draw a circle using CAShapeLayer

In questions like How to draw a smooth circle..., ...Draw Circle... and ...draw filled Circles the question and answer is very broad, contains lots of unnecessary steps and the methods used isn't always the easiest to re-create or manage. What …

Read More
Draw a line with UIBezierPath

First time using BezierPaths, wondering how this function is actually supposed to be implemented. Currently the bezier path moves within the frame of the image, as opposed to drawing on screen. Is there a better way to do it? func …

Read More