CODEWITHSUNDEEP
iosuibezierpathcashapelayer
david
david

Reputation: 3360

How to close triangle path?

I have drawn this shape:

enter image description here

here is my code:

/* build path */
let bottomBezierPath = UIBezierPath()
//first thing draw bottom line
bottomBezierPath.moveToPoint(CGPointMake(0, TRIANGLE_EDGE))
bottomBezierPath.addLineToPoint(CGPointMake(bottomShapeLayer.frame.size.width,TRIANGLE_EDGE))

//now draw triangle
bottomBezierPath.moveToPoint(CGPointMake(bottomShapeLayer.frame.size.width,TRIANGLE_EDGE))
bottomBezierPath.addLineToPoint(CGPointMake(bottomShapeLayer.frame.size.width,0))
bottomBezierPath.moveToPoint(CGPointMake(bottomShapeLayer.frame.size.width,0))
bottomBezierPath.addLineToPoint(CGPointMake(bottomShapeLayer.frame.size.width - TRIANGLE_EDGE ,TRIANGLE_EDGE))

bottomShapeLayer.path = bottomBezierPath.CGPath
bottomShapeLayer.fillColor = UIColor.redColor().CGColor
bottomShapeLayer.strokeColor = UIColor.redColor().CGColor

But I need to fill the triangle with red color, bottomShapeLayer.fillColor should do it, right ?

Upvotes: 2

Views: 86

Answers (1)

Hamish
Hamish

Reputation: 80821

You're creating 2 separate line segments for your triangle.

Each time you use moveToPoint(), you're starting a new line segment. Therefore, when the CAShapeLayer comes to fill the triangle, it is unable to fill it, as it's 'incomplete'.

The fix to this is really simple, you just have to create a continuous path for your triangle by removing one of the moveToPoint() calls:

let bottomBezierPath = UIBezierPath()
//first thing draw bottom line
bottomBezierPath.moveToPoint(CGPointMake(0, TRIANGLE_EDGE))
bottomBezierPath.addLineToPoint(CGPointMake(bottomShapeLayer.frame.size.width,TRIANGLE_EDGE))

//now draw triangle
//bottomBezierPath.moveToPoint(CGPointMake(bottomShapeLayer.frame.size.width,TRIANGLE_EDGE)) // this line is redundant btw, as you're moving to the same point. I've left it in incase you want to start your triangle somewhere else.
bottomBezierPath.addLineToPoint(CGPointMake(bottomShapeLayer.frame.size.width,0))
bottomBezierPath.addLineToPoint(CGPointMake(bottomShapeLayer.frame.size.width - TRIANGLE_EDGE ,TRIANGLE_EDGE))

It's also worth noting that your moveToPoint() call at the beginning of the triangle is also redundant, as it's moving to the same point.

Now you have a complete triangle and it should get filled correctly.

enter image description here

Upvotes: 1

Related Questions