Need a tip with UIBezierPath. Triangle Shape like Instagram Sign Up View

Question

I'm trying to create a bezier path like the instagram triangle in the picture below, however I must be doing something wrong. The Bezier path does not show!

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.

}

-(void)viewDidLayoutSubviews{
[super viewDidLayoutSubviews];

[self drawTriangle];

}

- (IBAction)closeButton:(UIButton *)sender {
[self dismissViewControllerAnimated:YES completion:nil];
}

- (void)drawTriangle{

UIBezierPath* trianglePath = [UIBezierPath bezierPath];
[trianglePath moveToPoint:CGPointMake(self.signUpButton.center.x, self.signUpButton.frame.origin.y + 30)];
[trianglePath addLineToPoint:CGPointMake(self.signUpButton.center.x - 10, self.imageView.frame.size.height)];
[trianglePath addLineToPoint:CGPointMake(self.signUpButton.center.x + 10, self.imageView.frame.size.height)];

UIColor *fillColor = [UIColor whiteColor];
[fillColor setFill];
UIColor *strokeColor = [UIColor whiteColor];
[strokeColor setStroke];

 [trianglePath fill];
[trianglePath stroke];

[trianglePath closePath];
}

Wolframite

Answer 1

Xcode 10 • Swift 4.2

func drawTriangle(size: CGFloat, x: CGFloat, y: CGFloat, up:Bool) {

    let triangleLayer = CAShapeLayer()
    let trianglePath = UIBezierPath()
    trianglePath.move(to: .zero)
    trianglePath.addLine(to: CGPoint(x: -size, y: up ? size : -size))
    trianglePath.addLine(to: CGPoint(x: size, y: up ? size : -size))
    trianglePath.close()
    triangleLayer.path = trianglePath.cgPath
    triangleLayer.fillColor = UIColor.white.cgColor
    triangleLayer.anchorPoint = .zero
    triangleLayer.position = CGPoint(x: x, y: y)
    triangleLayer.name = "triangle"
    view.layer.addSublayer(triangleLayer)
}

drawTriangle(size: 12, x: view.frame.midX/2, y: view.frame.midY, up: true)
drawTriangle(size: 12, x: view.frame.midX, y: view.frame.midY, up: false)

Tavy

what is the "12" for? just clarifying- im trying to translate to objc – Wolframite

12 is the size of the triangle – Tavy

this didnt work for me for some reason. I think the size thing has the triangle flipped. Either way, I see no triangle – Wolframite

also you cant set the position directly like that, you have to set it as a CGPoint – Wolframite

Do you want a sample project ? – Tavy

@Wolframite I have added the option to choose the position and the direction (up/down) of the arrow – Tavy

Hey @Leo Dabus a sample project would be an extremely nice and generous gesture ! – Wolframite

@Wolframite please send the url of a sample project in swift – Kopple

@Nik's there is not sample project. as compromise, the above code is working beautifully – Wolframite

@LeoDabus can you please show us how to you add a direction and position? – Empirin

@LeoDabus Good work. How can we draw like a popover design – Macdonell

Answer 2

Here is some sample code that I have drawn a triangle for UIButton in my project and working great.

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setBackgroundColor:[UIColor redColor]];
btn.frame = CGRectMake(100, 100, 80, 53);
[self.view addSubview:btn];

UIBezierPath* bezierPath = UIBezierPath.bezierPath;
[bezierPath moveToPoint:CGPointMake(40, 43)];
[bezierPath addLineToPoint:CGPointMake(25, 53)];
[bezierPath addLineToPoint:CGPointMake(55, 53)];
[bezierPath closePath];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = btn.bounds;
shapeLayer.path = bezierPath.CGPath;
shapeLayer.fillColor = [UIColor whiteColor].CGColor;

[btn.layer addSublayer:shapeLayer];

and if you want to remove triangle of previous button when you click on next button then use following code snippet:

NSArray *arr = btn.layer.sublayers;

for (id class in arr) {

    if ([class isKindOfClass:[CAShapeLayer class]] ) {
        [class removeFromSuperlayer];
    }
}

Coyle

I got an error with trying to remove the CAShapeLayer. *** Terminating app due to uncaught exception 'NSGenericException', reason: '*** Collection <CALayerArray: 0x17044afe0> was mutated while being enumerated.' – Wolframite

@SleepsOnNewspapers, Your exception message is clearly saying that you are removing the CALayer not CAShapeLayer. Check once again your code. – Coyle

this code works, however: if ([arr[0] isKindOfClass:[CAShapeLayer class]] ) { [arr[0] removeFromSuperlayer]; } else if ([arr[1] isKindOfClass:[CAShapeLayer class]] ) { [arr[1] removeFromSuperlayer]; – Wolframite

@Wolframite Take a look at my answer, you will notice that I have named the layer triangle to allow you to identify your layer if you need to removeFromSuperlayer – Tavy

@LeoDabus very insightful! I will mark u as the correct solution! – Wolframite