2012-05-30 18 views
21

estoy trabajando en el tipo de rompecabezas de juego donde tengo dos imágenes de enmascaramiento, he implementado este código para enmascararrecorte de imágenes con transparencia en iPhone

- (UIImage*) maskImage:(UIImage *)image withMaskImage:(UIImage*)maskImage { 

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
    CGImageRef maskImageRef = [maskImage CGImage]; 

    CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast); 

    if (mainViewContentContext==NULL) 
     return NULL; 

    CGFloat ratio = 0; 
    ratio = maskImage.size.width/ image.size.width; 
    if(ratio * image.size.height < maskImage.size.height) { 
     ratio = maskImage.size.height/ image.size.height; 
    } 

    CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}}; 
    CGRect rect2 = {{-((image.size.width*ratio)-maskImage.size.width)/2,-((image.size.height*ratio)-maskImage.size.height)/2},{image.size.width*ratio, image.size.height*ratio}}; 

    CGContextClipToMask(mainViewContentContext, rect1, maskImageRef); 
    CGContextDrawImage(mainViewContentContext, rect2, image.CGImage); 

    CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext); 
    CGContextRelease(mainViewContentContext); 

    UIImage *theImage = [UIImage imageWithCGImage:newImage]; 
    CGImageRelease(newImage); 
    return theImage; 
} 

enter image description here

+

enter image description here

=

Este es el resultado final que obtuve después del enmascaramiento.

enter image description here

Ahora me gustaría cortar la imagen en la pieza como enter image description here y enter image description here y así sucesivamente de forma paramétrica (recortar una imagen de transparencia).

si alguien ha implementado dicho código o alguna idea sobre este escenario, por favor comparta.

Gracias.

estoy usando esta línea de código para una imagen original del gato, marco frmImg para la celebración de pieza individual, enmascarado en photoshop y cropImg como sugerencia de Guntis Treulands

int i=1; 
    for (int x=0; x<=212; x+=106) { 
     for (int y=0; y<318; y+=106) { 
      CGRect rect = CGRectMake(x, y, 106, 106); 
      CGRect rect2x = CGRectMake(x*2, y*2, 212, 212); 

      UIImage *orgImg = [UIImage imageNamed:@"[email protected]"]; 
      UIImage *frmImg = [UIImage imageNamed:[NSString stringWithFormat:@"%[email protected]",i]]; 
      UIImage *cropImg = [self cropImage:orgImg withRect:rect2x]; 

      UIImageView *tmpImg = [[UIImageView alloc] initWithFrame:rect]; 
      [tmpImg setUserInteractionEnabled:YES]; 
      [tmpImg setImage:[self maskImage:cropImg withMaskImage:frmImg]]; 

      [self.view addSubview:tmpImg]; 
      i++; 
     } 
    } 

orgImg es decir 106x106 imagen recortada del original del gato @ 2x.png.

mi función para cortar es tan siguiente

- (UIImage *) cropImage:(UIImage*)originalImage withRect:(CGRect)rect { 
    return [UIImage imageWithCGImage:CGImageCreateWithImageInRect([originalImage CGImage], rect)]; 
} 
+3

Creo que la mejor manera de hacer esto es para enmascarar cada pieza y luego crear una nueva imagen de cada nueva pieza. – Simon

+0

@Simon: Esto es lo que me preocupa, ¿Cómo puedo recortar una imagen en pedazos por transparencia? – iCoder86

+0

@ iCoder86: ¿obtuviste la solución para recortar la imagen? También estoy atrapado con eso. ¿Puedes compartir tu código si lo tienes funcionando? –

Respuesta

16

ACTUALIZACIÓN 2

me hice muy curioso para encontrar una mejor manera de crear un rompecabezas, así que pasé dos fines de semana y ha creado una demo proyecto de Jigsaw puzzle.

Contiene:

  • proporcionan número de columnas/fila y generará las piezas del rompecabezas necesarios con correcta anchura/altura. Cuantas más columnas/filas, menor será el ancho/alto y el contorno/forma de rompecabezas en línea.
  • cada vez generar aleatoriamente lados
  • puede posicionar al azar/rotar las piezas al principio de lanzamiento
  • cada pieza se puede girar por medio de punción, o por dos dedos (como una pieza real) - pero una vez liberado, lo hará Ajustar a 90/180/270/360 grados
  • cada pieza se puede mover si se toca en su límite “forma tangible” (que es sobre todo la - misma forma de puzzle visible, pero sin formas en línea)

Inconvenientes :

  • sin verificar si la pieza está en su lugar correcto
  • si hay más de 100 piezas - comienza a lag, porque, al recoger una pieza, pasa por todas las subcarpetas hasta que encuentra la pieza correcta.

ACTUALIZACIÓN

Gracias por la pregunta actualizados.

me las arreglé para conseguir esto:

enter image description here

Como se puede ver - elemento del rompecabezas se recortan correctamente, y es en imageView cuadrado (color verde es UIImageView backgroundColor).

Por lo tanto - lo que hice fue:

CGRect rect = CGRectMake(105, 0, 170, 170); //~ location on cat image where second Jigsaw item will be. 

UIImage *originalCatImage = [UIImage imageNamed:@"cat.png"];//original cat image 

UIImage *jigSawItemMask = [UIImage imageNamed:@"JigsawItemNo2.png"];//second jigsaw item mask (visible in my answer) (same width/height as cat image.) 

UIImage *fullJigSawItemImage = [jigSawItemMask maskImage:originalCatImage];//masking - so that from full cat image would be visible second jigsaw item 

UIImage *croppedJigSawItemImage = [self fullJigSawItemImage withRect:rect];//cropping so that we would get small image with jigsaw item centered in it. 

Para la imagen de enmascaramiento que estoy usando la función de la categoría UIImage:

(pero es probable que pueda utilizar su función de enmascaramiento Pero lo voy a publicar de todos modos.).
- (UIImage*) maskImage:(UIImage *)image 
{  
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 

    UIImage *maskImage = self; 
    CGImageRef maskImageRef = [maskImage CGImage]; 

    // create a bitmap graphics context the size of the image 
    CGContextRef mainViewContentContext = CGBitmapContextCreate (NULL, maskImage.size.width, maskImage.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast); 


    if (mainViewContentContext==NULL) 
      return NULL; 

    CGFloat ratio = 0; 

    ratio = maskImage.size.width/ image.size.width; 

    if(ratio * image.size.height < maskImage.size.height) { 
      ratio = maskImage.size.height/ image.size.height; 
    } 

    CGRect rect1 = {{0, 0}, {maskImage.size.width, maskImage.size.height}}; 
    CGRect rect2 = {{-((image.size.width*ratio)-maskImage.size.width)/2 , -((image.size.height*ratio)-maskImage.size.height)/2}, {image.size.width*ratio, image.size.height*ratio}}; 


    CGContextClipToMask(mainViewContentContext, rect1, maskImageRef); 
    CGContextDrawImage(mainViewContentContext, rect2, image.CGImage); 


    // Create CGImageRef of the main view bitmap content, and then 
    // release that bitmap context 
    CGImageRef newImage = CGBitmapContextCreateImage(mainViewContentContext); 
    CGContextRelease(mainViewContentContext); 

    UIImage *theImage = [UIImage imageWithCGImage:newImage]; 

    CGImageRelease(newImage); 

    // return the image 
    return theImage; 
} 

respuesta anterior

¿se puede preparar una máscara para cada pieza?

Por ejemplo, usted tiene esa imagen de marco. ¿Puedes cortarlo en Photoshop en 9 imágenes separadas, donde en cada imagen solo mostraría la pieza correspondiente? (todo lo demás - eliminar).

Ejemplo - segunda pieza de la máscara:

enter image description here

continuación, se utiliza cada una de estas imágenes máscara de nueva creación de imagen del gato en - cada pieza enmascara toda la imagen, pero una paz. Por lo tanto, tendrás imágenes de 9 piezas usando 9 máscaras diferentes.

Para marcos de rompecabezas más grandes o diferentes: una vez más, cree máscaras de imagen separadas.

Esta es una solución básica, pero no perfecta, ya que debe preparar cada máscara de paz por separado.

creo que sirve ..

+0

Treilands: Ya he implementado lo que ha sugerido pero tiene el mismo problema de recorte vea la imagen aquí http://i.stack.imgur.com/ZN9Qk.png – iCoder86

+0

es Treulands. Si es difícil de reescribir, copie. Pero de todos modos, de hecho, su ejemplo parece que tiene imágenes cuadradas, y las imágenes se recortan para que quepan en forma cuadrada. Es posible (si aún no lo ha intentado) - imageView.contentMode = UIViewContentModeScaleAspectFit; ? –

+0

está estableciendo claramente el alto y el ancho incorrectos, ¿puede proporcionar su código? – Simon

Cuestiones relacionadas