¿Cómo creo texto borroso en una vista de iPhone?

Question

Estoy construyendo una vista con varios elementos de texto e imagen.

Quiero mostrar algo de texto en la vista con una copia borrosa del texto detrás de ella, pero no solo una sombra de texto.

¿Cómo aplico texto borroso gaussiano en un UIImage o capa?

Answer 1

En el escritorio, sin duda, usaría CoreImage para hacer esto.

Sin embargo, por teléfono, no creo que exista una forma de hacerlo con CoreGraphics. Si es absolutamente crítico, OpenGLES puede ayudar.

Sin embargo, le sugiero que reconsidere su interfaz. Creo que el texto borroso sería una distracción.

Editar: mledford señala en los comentarios que podría usar CoreAnimation. No sé si CA en el teléfono incluye un radio de desenfoque como en el escritorio, pero podrías intentarlo.

Answer 2

iPhone OS no proporciona ningún filtro de imagen central que yo sepa, de lo contrario, sí, un CALayer filtrado sería la manera correcta de hacerlo. Si NSBitmapImageRep estuviera disponible, podría hacer un desenfoque primitivo dibujando el texto en él, reduciendo la imagen (disminución de resolución) y luego ampliando la imagen nuevamente (upsampling); desafortunadamente, parece que también falta. He visto texto borroso realizado en Flash, que (la última vez que lo comprobé) no tiene filtrado a nivel de píxel; podrías intentar buscar un tutorial sobre eso y ver qué puedes adaptar a Cocoa Touch.

Answer 3

Tendrás un golpe de rendimiento si usas capas alfa. Considere un enfoque diferente si es posible (quizás incluso precomponiendo el texto y aplanándolo en un gráfico en lugar de varias capas).

Pruébalo y utiliza los instrumentos para comprobar el rendimiento y ver si es aceptable. Si lo hace en una vista desplazable, su desplazamiento se empantanará en un lote de .

Answer 4

Eche un vistazo a la muestra del iPhone GLImageProcessing de Apple. Se borra un poco, entre otras cosas.

El código en cuestión incluye:

static void blur(V2fT2f *quad, float t) // t = 1 
{ 
    GLint tex; 
    V2fT2f tmpquad[4]; 
    float offw = t/Input.wide; 
    float offh = t/Input.high; 
    int i; 

    glGetIntegerv(GL_TEXTURE_BINDING_2D, &tex); 

    // Three pass small blur, using rotated pattern to sample 17 texels: 
    // 
    // .\/.. 
    // ./\\/ 
    // \/X/\ rotated samples filter across texel corners 
    // /\\/. 
    // ../\. 

    // Pass one: center nearest sample 
    glVertexPointer (2, GL_FLOAT, sizeof(V2fT2f), &quad[0].x); 
    glTexCoordPointer(2, GL_FLOAT, sizeof(V2fT2f), &quad[0].s); 
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); 
    glColor4f(1.0/5, 1.0/5, 1.0/5, 1.0); 
    validateTexEnv(); 
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); 

    // Pass two: accumulate two rotated linear samples 
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); 
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); 
    glEnable(GL_BLEND); 
    glBlendFunc(GL_SRC_ALPHA, GL_ONE); 
    for (i = 0; i < 4; i++) 
    { 
     tmpquad[i].x = quad[i].s + 1.5 * offw; 
     tmpquad[i].y = quad[i].t + 0.5 * offh; 
     tmpquad[i].s = quad[i].s - 1.5 * offw; 
     tmpquad[i].t = quad[i].t - 0.5 * offh; 
    } 
    glTexCoordPointer(2, GL_FLOAT, sizeof(V2fT2f), &tmpquad[0].x); 
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE); 
    glActiveTexture(GL_TEXTURE1); 
    glEnable(GL_TEXTURE_2D); 
    glClientActiveTexture(GL_TEXTURE1); 
    glTexCoordPointer(2, GL_FLOAT, sizeof(V2fT2f), &tmpquad[0].s); 
    glEnableClientState(GL_TEXTURE_COORD_ARRAY); 
    glBindTexture(GL_TEXTURE_2D, tex); 
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE); 
    glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB,  GL_INTERPOLATE); 
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB,   GL_TEXTURE); 
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB,   GL_PREVIOUS); 
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC2_RGB,   GL_PRIMARY_COLOR); 
    glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB,  GL_SRC_COLOR); 
    glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA, GL_REPLACE); 
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_ALPHA,  GL_PRIMARY_COLOR); 

    glColor4f(0.5, 0.5, 0.5, 2.0/5); 
    validateTexEnv(); 
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); 

    // Pass three: accumulate two rotated linear samples 
    for (i = 0; i < 4; i++) 
    { 
     tmpquad[i].x = quad[i].s - 0.5 * offw; 
     tmpquad[i].y = quad[i].t + 1.5 * offh; 
     tmpquad[i].s = quad[i].s + 0.5 * offw; 
     tmpquad[i].t = quad[i].t - 1.5 * offh; 
    } 
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); 

    // Restore state 
    glDisableClientState(GL_TEXTURE_COORD_ARRAY); 
    glClientActiveTexture(GL_TEXTURE0); 
    glBindTexture(GL_TEXTURE_2D, Half.texID); 
    glDisable(GL_TEXTURE_2D); 
    glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB,  GL_SRC_ALPHA); 
    glActiveTexture(GL_TEXTURE0); 
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); 
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); 
    glDisable(GL_BLEND); 
}