How to give zigzag layer separation between two images

Question

I want to merge two images with adding Zigzag border layer between them.

Here is example of an image, which i want to integrate in my App.

How can i achieve this type of illusion between two images? i've tried Masking image also, but it is not giving me output which i properly want.

Please help me out of this. Any suggestions will be appreciate. Thanks

Answer 1

Hope this helps someone still looking to achieve something similar...You can accomplish this task in just 2 steps outlined below OR if you are in a hurry, go straight to the fully commented code that does exactly what you want to achieve.

Step 1: Take 2 images that you want to merge. Create a clipping bezier path with zigzag edges for the first image. Get the composite image back from graphics context.

Step 2: Start a new graphics context, draw the second image (on the right) in graphics context as it is. Next, draw the composite image you received in Step 1 above. Next, create a zigzag path using UIBezierpath, set line width and stroke the path with white color. Get the final image in above style from graphics context. That's all it there is to it!

Usage Example :

  UIImage *firstImage = [UIImage imageNamed:@"firstImage.png"];

  UIImage *secondImage = [UIImage imageNamed:@"secondImage.png"];

  self.imageView.image = [self zigZagImageFrom:firstImage secondImage:secondImage];

Code:

/*
Create image with "zigzag" separator line from 2 source images
Steps to acheive the desired output:
1: Create first image with zigzag edge on the right - change value of "width" variable as necessary to extend/reduce the visible area other than zigzag edge.
2: Draw "second image" in the context (canvas) as it is, but overlayed by first image with zigzag edge generated in the step 1 above. Draw zigzag line in desired color on the image from step2 above using the same curve path.
*/
+(UIImage *)zigZagImageFrom:(UIImage *)firstImage secondImage:(UIImage *)secondimage
{   
    CGFloat width = firstImage.size.width/2; //how much of the first image you would want to keep visible other than the zigzag edges.
    CGFloat height = firstImage.size.height;

    int totalZigzagCurves = 20;  // total no of waypoints in the zigzag path.
    CGFloat zigzagCurveWidth = width/30; // width of a single zigzag curve line.
    CGFloat zigzagCurveHeight = height/totalZigzagCurves; //height of a single zigzag curve line.

    CGFloat scale = [[UIScreen mainScreen] scale];

    UIGraphicsBeginImageContextWithOptions(firstImage.size, NO, scale);

    // -- STEP 1 --

    //We will make a clipping path in zigzag style
    UIBezierPath *zigzagPath = [[UIBezierPath alloc] init];

    //Begining point of the zigzag path
    [zigzagPath moveToPoint:CGPointMake(0, 0)];

    //draw zigzag path starting from somewhere middle on the top to bottom. - must be same for zigzag line in step 3.

    int a=-1;
    for (int i=0; i<totalZigzagCurves+2; i++) {
        [zigzagPath addLineToPoint:CGPointMake(width+(zigzagCurveWidth*a), zigzagCurveHeight*i + [self randomCurvePoint:i])];
        a= a*-1;
    }

    [zigzagPath addLineToPoint:CGPointMake(0, height)];

    //remove the remaining (right side) of image using zigzag path.
    [zigzagPath addClip];

    [firstImage drawAtPoint:CGPointMake(0, 0)];

    //Output first image with zigzag edge.
    UIImage *firstHalfOfImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();


    //We have the first image with zigzag edge. Now draw it over the second source image followed by zigzag line
    UIGraphicsBeginImageContextWithOptions(firstImage.size, YES, scale);

    // -- STEP 2 --

    //draw first & second image so that we can draw the zigzag line on it.
    [secondimage drawAtPoint:CGPointMake(0, 0)];
    [firstHalfOfImage drawAtPoint:CGPointMake(0, 0)];

    // -- STEP 3 --

    //Draw zigzag line over image using same curves.
    zigzagPath = [[UIBezierPath alloc] init];

    //Begining point of the zigzag line
    [zigzagPath moveToPoint:CGPointMake(width, -5)];

    //draw zigzag line path starting from somewhere middle on the top to bottom.
    a=-1;
    for (int i=0; i<totalZigzagCurves+2; i++) {
        [zigzagPath addLineToPoint:CGPointMake(width+(zigzagCurveWidth*a), zigzagCurveHeight*i + [self randomCurvePoint:i])];
        a= a*-1;
    }


    //Set color for zigzag line.
    [[UIColor whiteColor] setStroke];

    //Set width for zigzag line.
    [zigzagPath setLineWidth:6.0];

    //Finally, draw zigzag line over the image.
    [zigzagPath stroke];

    //Output final image with zigzag.
    UIImage *zigzagImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    //Desired output
    return zigzagImage;
}

    //To make some of the zigzag curves/waypoints with variable height
+(int)randomCurvePoint:(int)value{
    if (value == 0 ||  value == 2 ) return -8;
    else if (value == 4  ||   value == 5 || value == 17 || value == 18) return 28;
    else if (value == 16 ||  value == 8  || value == 9  || value == 19) return 2;
    else if (value == 12 ||  value == 13 || value == 14 || value == 15) return -29;
    else return 1;
}

Resultant Example Image: Sorry for my inability to post an example image from the above sample code. Unfortunately, I need at least 10 reputation points to be able to post images. Since it is my first post, I am not allowed to post one.

Thanks for upvoting the answer. Here is the resultant image:

TIP: make it a category on UIImage

Answer 2

I would create a CGPath to achieve this. You could calculate its zig-zag on the go, depending on the height of the right image. (ignore the left image, the right will sit on top of it).

Then what you do is create a path that has the zig-zag on the left (start from a point, add line to x+8/y+24, add line to x-8/y+15, and repeats) and then include the whole region to the right (add 3 straight lines of the rect).

After that create CAShapeLayer (which takes a CGPathRef!) and pass the path you have just created. Set it to be the layer's mask. One final step: in your drawInRect: of the UImageView, render the same path instance, with just a white stroke with the proper width.

Good luck!