我想合并两个图像并在它们之间添加 Zigzag 边界层。
这是一个图像示例,我想将其集成到我的应用程序中。
我怎样才能在两个图像之间实现这种错觉? 我也试过遮蔽图像,但它没有给我正确想要的输出。
请帮我解决这个问题。 任何建议将不胜感激。 谢谢
最佳答案
希望这对仍然希望实现类似目标的人有所帮助...您可以通过下面概述的 2 个步骤完成此任务,或者如果您赶时间,请直接转到完全注释的代码,这些代码完全符合您想要实现的目标.
第 1 步:拍摄 2 张要合并的图像。为第一张图像创建一个锯齿形边缘的剪切贝塞尔曲线路径。从图形上下文中获取合成图像。
第 2 步: 启动一个新的图形上下文,在图形上下文中按原样绘制第二个图像(右侧)。接下来,绘制您在上面的第 1 步中收到的合成图像。接下来,使用 UIBezierpath 创建一个锯齿形路径,设置线宽并用白色描边路径。从图形上下文中获取上述样式的最终图像。仅此而已!
使用示例:
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 上的类别
关于ios - 如何在两个图像之间进行锯齿形图层分离,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24603573/