How to crop the image using UIBezierPath?

I want to get the image from the UIBezierpath closed path(See the image). I draw the image on the UIView using drawRect method and also draw the lines are using the drawRect method. How can I get the particular closed path image? Please help me. Thanks in advance.

This code used for draw the bezierpath.

UIBezierPath *aPath = [UIBezierPath bezierPath];
for (NSString *pointString in pointArray) {
    if ([pointArray indexOfObject:pointString] == 0)
        [aPath moveToPoint:CGPointFromString(pointString)];
    else
        [aPath addLineToPoint:CGPointFromString(pointString)];
}
[aPath closePath];

enter image description here


Solution 1:

You can use a shapeLayer for that. Something like,

UIBezierPath *aPath = [UIBezierPath bezierPath];
for (NSString *pointString in pointArray) {
    if ([pointArray indexOfObject:pointString] == 0)
        [aPath moveToPoint:CGPointFromString(pointString)];
    else
        [aPath addLineToPoint:CGPointFromString(pointString)];
}
[aPath closePath];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = aPath.CGPath;
[view.layer setMask:shapeLayer];//or make it as [imageview.layer setMask:shapeLayer]; 
//and add imageView as subview of whichever view you want. draw the original image
//on the imageview in that case

To get it as an image,

UIGraphicsBeginImageContext(view.bounds.size);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

image should have the corresponding image.

Solution 2:

For Swift try this : ZImageCropper

ZImageCropper is using following things as core part:

  • UIBezierPath
  • UITouch Events
  • CAShapeLayer
  • CoreGraphics

Solution 3:

Well, there are a couple of things that you have to take in notice.

  1. Are you passing your UIImageView instead of your UIView?
  2. If you are, did you enable your image view for touch handling?
  3. Subclass your UIImageView and use drawrect() for handling that stuff for you.

If you want only a portion of the image (like the cat), then you need to submask your image according to UIBezierPath.

Updated

The following is a complete working example, change it to your requirements.

ViewController.h:

@interface ViewController : UIViewController
{
  UIBezierPath *aPath;
}
@property (nonatomic,retain) NSMutableArray *pathArray;
@property (nonatomic,retain) NSMutableDictionary *dic;
@property (nonatomic,retain) IBOutlet UIImageView *imgView;

@end

ViewController.m:

@interface ViewController ()
 - (IBAction)Crop:(id)sender;
@end

@implementation ViewController
@synthesize pathArray,dic,imgView;
- (void)viewDidLoad
 {
   [super viewDidLoad];

 }
 - (void) setClippingPath:(UIBezierPath *)clippingPath : (UIImageView *)imgView;
{

    NSLog(@"Mask Paths %@",clippingPath);

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.imgView.frame;
    maskLayer.path = [clippingPath CGPath];
    maskLayer.fillColor = [[UIColor whiteColor] CGColor];
    maskLayer.backgroundColor = [[UIColor clearColor] CGColor];


    self.imgView.layer.mask = maskLayer;



}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 {

   UITouch *mytouch=[[touches allObjects] objectAtIndex:0];
   self->aPath = [[UIBezierPath alloc]init];
   [aPath moveToPoint:[mytouch locationInView:imgView]];

}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
 {

  UITouch *mytouch=[[touches allObjects] objectAtIndex:0];
  [aPath addLineToPoint:[mytouch locationInView:imgView
                       ]];

 }
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
 {

 }
- (IBAction)Crop:(id)sender
 {
  [self setClippingPath:aPath :imgView];
 }