iphone UIbezierpath irregular image cropping

Question

Am creating a jigsaw puzzle game for iPhone.

Here i have to crop the image just like the below image

After the googling i came to know uibezier path is the best one for cropping the image in irregular shapes.

But i didn't get any code or idea to how to crop the image like above one.

Answer 1

It will take a lot of trial and error, I did this quickly just to give you an idea of how to to create shapes using Bezier Paths. Below is example code to create a square shape that I quickly created

 UIBezierPath *aPath = [UIBezierPath bezierPath];

    // Set the starting point of the shape.
    [aPath moveToPoint:CGPointMake(50.0, 50.0)];
    // Draw the lines.
    [aPath addLineToPoint:CGPointMake(100.0, 50.0)];
    [aPath addLineToPoint:CGPointMake(100.0, 100.0)];
    [aPath addLineToPoint:CGPointMake(50.0, 100.0)];
    [aPath closePath];

    CAShapeLayer *square = [CAShapeLayer layer];
    square.path = aPath.CGPath;
    [self.view.layer addSublayer:square];

If I had more time, I could create the image, but did this quickly as don't have too much time. Its not too hard to use once you get your head round how the points are made. It will take you a lot of trial and error to create this shape, but use the code I provided as a basis for how to create shapes using Bezier paths. You will need to create a lot more points to end up with the shape you have in mind.

I would also recommend looking at Apples developer guide for creating irregular shapes

http://developer.apple.com/library/ios/#documentation/2ddrawing/conceptual/drawingprintingios/BezierPaths/BezierPaths.html

In particular look at the "Adding Curves to Your Path" for understanding how to create curves and adding them to your image. You will need that in order to create the jigsaw puzzle piece shape you are trying to create

EDIT:

Try this method

- (void) setClippingPath:(UIBezierPath *)clippingPath : (UIImageView *)imgView;
{
    if (![[imgView layer] mask])
        [[imgView layer] setMask:[CAShapeLayer layer]];

    [(CAShapeLayer*) [[imgView layer] mask] setPath:[clippingPath CGPath]];
}

The above method will take a bezier path and an ImageView and then apply the bezier path to that particular imageView. It will do the clipping as well. Will take a lot of trial and error I would imagine to get the shape just right, can be difficult and frustrating creating complex shapes sometimes.

Quick example of applying this code

UIBezierPath *aPath = [UIBezierPath bezierPath];
    // Set the starting point of the shape.
    [aPath moveToPoint:CGPointMake(0.0, 0.0)];
    // Draw the lines.
    [aPath addLineToPoint:CGPointMake(50.0, 0.0)];
    [aPath addLineToPoint:CGPointMake(50.0, 50.0)];
    [aPath addLineToPoint:CGPointMake(0.0, 50.0)];
    [aPath closePath];

    UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bar.png"]];
    imgView.frame = CGRectMake(0, 0, 100, 100);
    [self setClippingPath:aPath :imgView];
    [self.view addSubview:imgView];

Just quickly made a square out of the top left part of the image. If you for example, had a square image, you could loop through the width and height of the image, cropping into separate squares using above code and returning them individually. Creating jigsaw puzzle piece a lot more complicated, but hope this helps