How to make the line edge smooth?

Question

I am trying to draw a cursor and I've used UIBezierPath to do so.

Here is what I did :

1. drawing line from the top pointer to the right edge.

2. drawing line from the top pointer to the left edge.

3. setting the bezierPath to a layer with width.

here is the code:

cursorLayerPathPointTop = UIBezierPath()
cursorLayerPathPointTop.lineJoinStyle = CGLineJoin.Round
cursorLayerPathPointTop.lineCapStyle = CGLineCap.Round
cursorLayerPathPointTop.lineWidth = 20

cursorLayerPathPointTop.moveToPoint(cursor_point_top)
cursorLayerPathPointTop.addLineToPoint(cursorRightPoint)
cursorLayerPathPointTop.moveToPoint(cursor_point_top)
cursorLayerPathPointTop.addLineToPoint(cursorLeftPoint)

//adding calyer
cursorLayer = CAShapeLayer()
cursorLayer.lineWidth = 3.0;
cursorLayer.path = cursorLayerPathPointTop.CGPath
cursorLayer.strokeColor = UIColor.whiteColor().CGColor
self.layer.addSublayer(cursorLayer)

I need to make the cursor thick , so that the reason for setting cursorLayer.lineWidth = 3.0;.

but here is what i got:

As you can see the pointer the lines is not joined together smoothly. What should I do to fix that ?

Answer 1

The lineJoinStyle and lineCapStyle properties on UIBezierPath are only used when you're drawing the path with UIBezierPath.

You want the CAShapeLayer equivalent:

cursorLayer.lineJoin = kCALineJoinRound;
cursorLayer.lineCap = kCALineCapRound;

Fogmeister is also right about you needing to draw a single line path, rather than two lines.

Answer 2

Your code is currently creating two separate line segments.

Instead do this...

cursorLayerPathPointTop.moveToPoint(cursorRightPoint)
cursorLayerPathPointTop.addLineToPoint(cursor_point_top)
cursorLayerPathPointTop.addLineToPoint(cursorLeftPoint)

This will create a single line starting from the right point, going to the top point and then going down to the left point.

It will then use the join style properly where the corner is.