Need advice with UIBezierPath. Triangle shape like Instagram Sign Up View
I am trying to create a bezier path like the instagram triangle in the picture below, however I must be doing something wrong. Bézier path is not displayed!
- (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];
}
+3
source to share
2 answers
Xcode 8.2.1 • Swift 3.0.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)
+9
source to share
Here is some sample code I drew with triangle for UIButton
in my project and works 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 the triangle of the previous button when the next button is clicked use the following code snippet:
NSArray *arr = btn.layer.sublayers;
for (id class in arr) {
if ([class isKindOfClass:[CAShapeLayer class]] ) {
[class removeFromSuperlayer];
}
}
+3
source to share