UIBezierPath doesn't work

Question

Before the thought of posting this question came into my mind I had already spent a few hours on this small snippet of code... So I wrote two different pieces of code in two different classes, and both were used to cut out a specific shape. But for some reason only one of them worked!?!? I have ABSOLUTELY no idea why this happened, for they have the exact same structure.

Below is the snippet that WORKS.

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor blackColor];
        UIBezierPath *arrowPath = [UIBezierPath bezierPath];
        CGPoint start = CGPointMake(self.frame.size.width - 2, self.frame.size.height / 2);
        [arrowPath moveToPoint:start];
        [arrowPath addLineToPoint:CGPointMake(7, 7)];
        [arrowPath addLineToPoint:CGPointMake(2, 7)];
        [arrowPath addLineToPoint:CGPointMake(self.frame.size.width - 7, self.frame.size.height/2)];
        [arrowPath addLineToPoint:CGPointMake( 2, self.frame.size.height - 7)];
        [arrowPath addLineToPoint:CGPointMake(7, self.frame.size.height - 7)];
        [arrowPath addLineToPoint:start];
        [arrowPath closePath];
        UIView *arrow = [[UIView alloc]initWithFrame:self.frame];
        arrow.backgroundColor = [UIColor whiteColor];
        CAShapeLayer *mask = [CAShapeLayer layer];
        mask.frame = self.frame;
        mask.backgroundColor = (__bridge CGColorRef)([UIColor clearColor]);
        mask.path = arrowPath.CGPath;
        arrow.layer.mask = mask;
        [self addSubview:arrow];
        }
    return self;
}

And here is the piece of code that only works PARTIALLY.

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        UIView *roundedRectView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height - 20)];
        roundedRectView.backgroundColor = [UIColor clearColor];
        [self addSubview:roundedRectView];

        UIBezierPath *roundedRectPath = [UIBezierPath bezierPathWithRoundedRect:roundedRectView.frame cornerRadius:10];
        UIView *rectangle = [[UIView alloc]initWithFrame:roundedRectView.frame];
        rectangle.backgroundColor = [UIColor blackColor];
        CAShapeLayer *mask = [CAShapeLayer layer];
        mask.frame = rectangle.frame;
        mask.path = roundedRectPath.CGPath;
        mask.backgroundColor = (__bridge CGColorRef)([UIColor clearColor]);
        rectangle.layer.mask = mask;
        rectangle.alpha = 0.8;
        [roundedRectView addSubview:rectangle];

        UIView *rectangleTwo = [[UIView alloc]initWithFrame:CGRectMake(0, self.frame.size.height - 20, self.frame.size.width, 20)];
        rectangleTwo.backgroundColor = [UIColor redColor];
        UIBezierPath *trianglePath = [UIBezierPath bezierPath];
        CGPoint start = CGPointMake(rectangleTwo.frame.size.width / 2 - 15, 0);
        [trianglePath moveToPoint:start];
        [trianglePath addLineToPoint:CGPointMake(start.x + 20, start.y)];
        [trianglePath addLineToPoint:CGPointMake(start.x + 10, start.y + 20)];
        [trianglePath addLineToPoint:start];
        [trianglePath closePath];
        CAShapeLayer *triangleMask = [CAShapeLayer layer];
        triangleMask.frame = rectangleTwo.frame;
        triangleMask.path = trianglePath.CGPath;
        rectangleTwo.layer.mask = triangleMask;
        [self addSubview:rectangleTwo];
    }
    return self;
}

Allocating this speech bubble using CGRectMake(0,0,80,60) , only the rounded rectangle showed up on the screen, but the triangle was no where to be seen.

Can anyone point out what's wrong with this code? Any help is appreciated, thanks!!

Answer 1

Problem solved! Turned out that my triangleMask.frame wasn't defined properly. Instead of triangleMask.path = rectangleTwo.frame I should've used triangleMask.frame = CGRectMake(0, 0, rectangleTwo.frame.size.width, rectangleTwo.frame.size.height); instead! CAShapeLayer 's origin is relative to that of the shape on which you want to place it!