如何在两个图像之间进行锯齿形层分离

Question

我想合并两个图像，并在它们之间添加Zigzag边界层。

以下是我希望集成到我的应用中的图像示例。

我如何在两幅图像之间实现这种幻觉？ 我也尝试过遮蔽图像，但它并没有给我正确想要的输出。

请帮我解决这个问题。 任何建议将不胜感激。 谢谢

Answer 1

希望这可以帮助那些仍然希望实现类似功能的人...您可以通过下面列出的两个步骤完成此任务，或者如果您赶时间，请直接查看完全符合您想要实现的完全注释的代码

第1步：拍摄2张要合并的图像。为第一个图像创建具有锯齿形边缘的剪切贝塞尔曲线路径。从图形上下文中获取合成图像。

第2步：启动新的图形上下文，在图形上下文中原样绘制第二个图像（在右侧）。接下来，绘制您在上面的步骤1中收到的合成图像。接下来，使用UIBezierpath创建一个Z字形路径，设置线宽并使用白色描边路径。从图形上下文获取上面样式的最终图像。这就是它的全部！

用法示例：

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

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

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

<强>代码：

/*
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;
}

结果示例图片 很抱歉我无法从上面的示例代码发布示例图像。不幸的是，我需要至少10个声望点才能发布图像。由于这是我的第一篇文章，我不允许发帖。

感谢您的回答。这是结果图像：

提示：将其设为UIImage的类别

Answer 2

我会创建一个CGPath来实现这一目标。你可以在旅途中计算它的锯齿形，具体取决于右图像的高度。 （忽略左图，右边会坐在它上面）。

然后你要做的是创建一个左边有锯齿形的路径（从一个点开始，添加到x + 8 / y + 24的线，添加到x-8 / y + 15的线，并重复）然后将整个区域包括在右边（添加3条直线）。

之后创建CAShapeLayer（接受CGPathRef！）并传递刚刚创建的路径。将其设置为图层的蒙版。 最后一步：在UImageView的drawInRect:中，使用适当宽度的白色笔划渲染相同的路径实例。

祝你好运！