Clip UIView using UIBezierPath in iOS

Question

As in image attached, can anyone guide me how I can clip the background view based on the bezierpath layer added on it.

Thanks in advance! enter image description here

Need to clip the top portion or bottom portion? – Rajesh Jul 23 '14 at 12:37 — Rajesh, Jul 23 '14 at 12:37
@iDev need to clip top portion – Hassan ilyas Jul 23 '14 at 12:41 — Hassan ilyas, Jul 23 '14 at 12:41

score 2 · Answer 1 · answered Jul 23 '14 at 12:41

2

To clip the top part you may use belowLine

UIBezierPath *aPath = [UIBezierPath bezierPath];
[aPath moveToPoint:CGPointMake(0, 0)];
[aPath appendPath:pathExact];//Path exact is your original path drawn
[aPath addLineToPoint:CGPointMake(self.frame.size.width, 0)];
[aPath addLineToPoint:CGPointMake(0, 0)];
[aPath closePath];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = aPath.CGPath;
[self.layer setMask:shapeLayer];

answered Jul 23 '14 at 12:41

Rajesh

10,318
16
44
64

There's a very good example of doing exactly this from WWDC 2013 (I think). – Fogmeister Jul 23 '14 at 12:43

score 1 · Accepted Answer · answered Jul 23 '14 at 12:39

1

You can use the following class:

UIBezierPathView.h

#import <UIKit/UIKit.h>

@interface UIBezierPathView : UIView

- (instancetype) initWithBezierPath:(UIBezierPath *)bezierPath;

@property (nonatomic, strong) UIColor *fillColor;
@property (nonatomic, strong) UIColor *strokeColor;

@end

UIBezierPathView.m

#import "UIBezierPathView.h"



@interface UIBezierPathView()

@property (nonatomic, strong) UIBezierPath *bezierPath;

@end

@implementation UIBezierPathView

- (id) initWithBezierPath:(UIBezierPath *)bezierPath
{
    self = [self initWithFrame:bezierPath.bounds];
    if(self)
    {
        self.bezierPath = bezierPath.copy;
        [self.bezierPath applyTransform:CGAffineTransformMakeTranslation(-CGRectGetMinX(self.frame), -CGRectGetMinY(self.frame))];
        self.backgroundColor = [UIColor clearColor];
        self.fillColor = [UIColor clearColor];
        self.strokeColor = [UIColor clearColor];
    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    [self.strokeColor setStroke];
    [self.fillColor setFill];
    [self.bezierPath fill];
    [self.bezierPath stroke];
}

@end

answered Jul 23 '14 at 12:39

Sviatoslav Yakymiv

7,887
2
23
43

This will be difficult with the gradient fill that he wants. – Fogmeister Jul 23 '14 at 12:43
I don't understand what will be difficult. – Sviatoslav Yakymiv Jul 23 '14 at 12:44
Actually, no. This will just recreate the image that he has in the question. He wants to use the path to mask the background image. – Fogmeister Jul 23 '14 at 12:45
I though that it is another view. – Sviatoslav Yakymiv Jul 23 '14 at 12:47
@SviatoslavYakymiv I have used this class but bezierpath is not filling. Can you suggest me what can be the reason? – Hassan ilyas Jul 23 '14 at 19:19
Could you please provide screenshot? – Sviatoslav Yakymiv Jul 23 '14 at 19:24
@SviatoslavYakymiv I have added new picture with blue line into the description. – Hassan ilyas Jul 23 '14 at 19:35
You can use clear fillColor and create another background view with gradient. Or add backgroundView property to UIBezierPathView. – Sviatoslav Yakymiv Jul 23 '14 at 19:47
@SviatoslavYakymiv Can you update it in your answer? – Hassan ilyas Jul 23 '14 at 19:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57872/discussion-between-hassan-ilyas-and-sviatoslav-yakymiv). – Hassan ilyas Jul 23 '14 at 19:54
@SviatoslavYakymiv do you have any update for me? – Hassan ilyas Aug 05 '14 at 07:43

Clip UIView using UIBezierPath in iOS

2 Answers2