두 이미지간에 지그재그 레이어 분리 방법

Question

지그재그 테두리 레이어를 추가하여 두 이미지를 병합하고 싶습니다.

다음은 내 앱에 통합하려는 이미지의 예입니다.

어떻게 두 이미지간에 이러한 환상을 만들 수 있습니까? 이미지 마스킹을 시도했지만 제대로 출력하지 못했습니다.

도와주세요. 제안 사항에 감사드립니다. 감사합니다.

Answer 1

호프 이것은 누군가 비슷한 것을 성취하기 위해 여전히 도움이 될 것입니다. 아래에서 설명하는 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 개의 평판 포인트가 필요합니다. 첫 번째 게시물이기 때문에 게시 할 수 없습니다.

답을 upvoting 주셔서 감사합니다.다음은 결과 이미지는 다음과 같습니다

팁 :있는 UIImage 귀하의 제안에 대한

Answer 2

이렇게하려면 CGPath을 만듭니다. 올바른 이미지의 높이에 따라 이동 중에 지그재그를 계산할 수 있습니다. (왼쪽 이미지 무시, 오른쪽 상단에 앉을 것이다).

다음은 왼쪽에서 지그재그가있는 경로를 작성하는 것입니다 (점에서 시작하여 x + 8/y + 24에 행 추가, x-8/y + 15 행 추가 및 반복) 한 다음 오른쪽에 전체 영역을 포함시킵니다 (rect의 3 직선 추가).

그런 다음 CAShapeLayer (CGPathRef!를 사용)을 만들고 방금 만든 경로를 전달하십시오. 레이어의 마스크로 설정하십시오. 마지막 단계 : UImageView의 drawInRect:에서 적절한 너비의 흰 선으로 동일한 경로 인스턴스를 렌더링합니다.

행운을 빈다.