CAShapeLayer: different line cap at start/end

Question

I'm using CAShapeLayer to draw a semicircle and I want to have a kCGLineCapRound at the start and a kCGLineCapButt at the end. How can I do that?

UIBezierPath *circlePathMax = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.center.x, self.view.center.y) radius:radius startAngle:angle1 endAngle:angle2 clockwise:YES];
             CAShapeLayer *circleMax;
             circleMax               = [CAShapeLayer layer];
             circleMax.path          = circlePathMax.CGPath;
             circleMax.lineCap       = kCALineCapRound;
             circleMax.fillColor     = [UIColor clearColor].CGColor;
             circleMax.lineWidth     = 10;
             circleMax.strokeColor = [UIColor colorWithRed:255.0/255.0f green:255.0f/255.0f blue:255.0f/255.0f alpha:0.7f].CGColor;
             circleMax.zPosition     = 3;
             [self.view.layer addSublayer:circleMax];

I can specify only one generic lineCap

I'm sorry but it doesn't seems possible.
The workaround could be overlap partially 2 different lines with different cap. — Andrea, Jul 01 '15 at 09:13
@Andrea I already tried that but I can't have an overlap because I'm using a color with alpha as strokeColor... — Luciano, Jul 01 '15 at 09:17
@dip unfortunately no. In my case I had to draw a semicircle with transparency on top of an image of a gradient semicircle. This allowed me to use .butt with the background color (with alpha component) as strokeColor to "hide" the squared corners. But it was a specific case. — Luciano, Nov 12 '19 at 10:08

score 1 · Answer 1 · answered Jun 16 '20 at 13:01

1

You could use lineCap .butt, and at the end of your semicircle, draw yourself a circle.

answered Jun 16 '20 at 13:01

Ysy

11
2

score 0 · Answer 2 · answered Nov 14 '19 at 13:45

This is the trick I used. In my case I had to draw a semicircle with transparency on top of an imageView of a gradient semicircle. This allowed me to use .butt with the background color (with alpha component) as strokeColor to "hide" the squared corners.

let circleMin = CAShapeLayer.init()
let circlePathMin = UIBezierPath.init(arcCenter: myCenter, radius: myRadius, startAngle: startingAngle, endAngle: endingAngle, clockwise: true)
circleMin.path = circlePathMin.cgPath
circleMin.lineCap = .butt
circleMin.fillColor = UIColor.clear.cgColor
circleMin.lineWidth = 14
circleMin.strokeColor = self.containerView.backgroundColor?.withAlphaComponent(0.7).cgColor
circleMin.zPosition = 3
containerView.layer.addSublayer(circleMin)

CAShapeLayer: different line cap at start/end

2 Answers2