ios - bar - Cómo dar separación de capas en zigzag entre dos imágenes

uisearchbar swift 4

Question

Quiero unir dos imágenes con la adición de una capa de borde en zigzag.

Aquí hay un ejemplo de una imagen, que quiero integrar en mi aplicación.

¿Cómo puedo lograr este tipo de ilusión entre dos imágenes? También probé la imagen enmascarante, pero no me da el resultado que deseo.

Por favor, échame una mano con esto. Cualquier sugerencia será apreciada. Gracias

Answer 1

CGPath un CGPath para lograr esto. Puede calcular su zig-zag sobre la marcha, dependiendo de la altura de la imagen de la derecha. (ignore la imagen de la izquierda, la derecha se colocará encima).

Entonces lo que debes hacer es crear un camino que tenga el zig-zag a la izquierda (empieza desde un punto, agrega una línea a x + 8 / y + 24, agrega una línea a x-8 / y + 15, y repite) y luego incluya toda la región a la derecha (agregue 3 líneas rectas del rect).

Después de eso, cree CAShapeLayer (que toma un CGPathRef!) Y pase la ruta que acaba de crear. Configúralo como la máscara de la capa. Un último paso: en su drawInRect: de UImageView, renderice la misma instancia de ruta, con solo un trazo blanco con el ancho adecuado.

¡Buena suerte!

Answer 2

Espero que esto ayude a alguien que aún busca lograr algo similar ... Puede realizar esta tarea en solo 2 pasos que se detallan a continuación O, si tiene prisa, vaya directamente al código completamente comentado que hace exactamente lo que quiere lograr.

Paso 1: tome 2 imágenes que desee fusionar. Cree una ruta de recorte de bezier con bordes de zigzag para la primera imagen. Recupera la imagen compuesta desde el contexto de los gráficos.

Paso 2: comience un nuevo contexto de gráficos, dibuje la segunda imagen (a la derecha) en el contexto de gráficos tal como está. A continuación, dibuje la imagen compuesta que recibió en el Paso 1 anterior. A continuación, cree una ruta en zigzag con UIBezierpath, establezca el ancho de línea y recorra la ruta con color blanco. Obtenga la imagen final en el estilo anterior del contexto de gráficos. ¡Eso es todo!

Ejemplo de uso:

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

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

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

Código:

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

Imagen de ejemplo resultante: lo siento por la imposibilidad de publicar una imagen de ejemplo del código de ejemplo anterior. Lamentablemente, necesito al menos 10 puntos de reputación para poder publicar imágenes. Como es mi primera publicación, no puedo publicar una.

Gracias por votar la respuesta. Aquí está la imagen resultante:

CONSEJO: haz que sea una categoría en UIImage