Efectos de imagen con gráficos centrales

Question

Me pregunto cómo reproducir los efectos de imagen que podemos ver en varias aplicaciones de Mac y iPhone, todas ellas a partir de una imagen en blanco y negro: - En UiTabbar en iPhone, cómo, el negro y imagen en blanco convertido en un gradiente azul cuando se selecciona - en Twitter para Mac, podemos ver varios efectos (resplandor, bisel, ....)

Cualquier ayuda sobre este tema es bienvenida. :)

EDIT: Estoy interesado en estos efectos en el sistema operativo MAC, no en el iPhone.

Answer 1

Desafortunadamente iOS carece del marco de Core Image disponible en MacOSX, que es la fuente de todos esos hermosos efectos. Los efectos de UITabBar se pueden recrear utilizando las características de recorte de máscara de Core Graphics (consulte, por ejemplo,

void CGContextClipToMask (
    CGContextRef c, 
    CGRect rect, 
    CGImageRef mask 
); 

). Esto es posible porque el enmascaramiento se basa en la imagen alfa y todos los botones de la barra de pestañas están basados ​​en alfa (intente agregar en una barra de pestañas una imagen que no esté basada en alfa y verá el efecto final ...). Finalmente puede echar un vistazo al ejemplo

GLImageProcessing

contenido en la documentación de XCode o here: esto explica cómo hacer un procesamiento básico de imágenes usando OpenGL ES 1.1 (por cierto este ejemplo contiene algunos métodos básicos de texturizado y renderizado que puede reutilizar para integrar cualquier Vista OpenGL en su aplicación basada en UIKit).

Answer 2

No creo que sea necesario dibujarlos ya que pueden obtener lo mismo con imágenes hechas con otro software (photoshop, pixelmator, etc.). ¿Por qué? porque el contenido (del botón) no cambia, no se cambia de tamaño para que las imágenes se vean bien y la forma más fácil aquí.

Si desea aprender a dibujar con Quartz, hay una gran cantidad de documentos y muestras en Apple dev center y/o Xcode.

Ésta es una tutorial reciente de Matt Gallagher: Advanced drawing using AppKit

Answer 3

Salida proyecto QuartzDemo muestra de Apple. La clase QuartzClipping le muestra cómo trabajar con clipping y enmascaramiento. Esto es lo que descubrí basado en ese proyecto.

CGContextRef context = UIGraphicsGetCurrentContext(); 

UIImage *img = [UIImage imageNamed:@"at.png"]; 
CGImageRef alphaImage = CGImageRetain(img.CGImage); 

UIImage *backgroundImg = [UIImage imageNamed:@"gradientBackground.png"]; // background image for normal state 
CGImageRef image = CGImageRetain(backgroundImg.CGImage); 


CGFloat height = self.bounds.size.height; 
CGContextTranslateCTM(context, 0.0, height); 
CGContextScaleCTM(context, 1.0, -1.0); 

CGContextSetRGBFillColor(context, 0.129, 0.129, 0.129, 1.0); 
CGContextFillRect(context, self.bounds); 

CGContextSaveGState(context); 
CGContextClipToMask(context, CGRectMake(100.0, height - 150.0, img.size.width, img.size.height), alphaImage); 
CGContextDrawImage(context, CGRectMake(100.0 - (backgroundImg.size.width-img.size.width)/2, 
             height - 150 - (backgroundImg.size.height-img.size.height)/2, 
             backgroundImg.size.width, 
             backgroundImg.size.height), image); 
CGContextRestoreGState(context); 



UIImage *backgroundImg2 = [UIImage imageNamed:@"TabBarItemSelectedBackground.png"]; // background image for selected state 
CGImageRef image2 = CGImageRetain(backgroundImg2.CGImage); 

CGContextSaveGState(context); 
CGContextClipToMask(context, CGRectMake(180.0, height - 150.0, img.size.width, img.size.height), alphaImage); 
CGContextDrawImage(context, CGRectMake(180.0 - (backgroundImg2.size.width-img.size.width)/2, 
             height - 150.0 - (backgroundImg2.size.height-img.size.height)/2, 
             backgroundImg2.size.width, 
             backgroundImg2.size.height), image2); 
CGContextRestoreGState(context); 


CGImageRelease(image); 
CGImageRelease(alphaImage); 
CGImageRelease(image2);