Comment créer un texte flou dans une vue iPhone?

Question

Je construis une vue avec divers éléments de texte et d'image.

Je veux afficher un texte dans la vue avec une copie floue du texte derrière, mais pas seulement une ombre de texte. Comment appliquer un texte flou gaussien sur une image ou un calque UII?

Answer 1

Sur le bureau, sans aucun doute, vous utiliseriez CoreImage pour ce faire.

Sur le téléphone cependant, je ne pense pas qu'il existe un moyen de le faire en utilisant CoreGraphics. Si c'est absolument essentiel OpenGLES peut être en mesure d'aider.

Cependant, je suggère de repenser votre interface. Je pense que le texte flou serait distrayant. Editer: mledford souligne dans les commentaires que vous pourriez utiliser CoreAnimation. Je ne sais pas si CA sur le téléphone inclut le rayon de flou comme sur le bureau, mais vous pourriez l'essayer.

Answer 2

iPhone OS ne fournit pas de filtres Core Image que je connais - sinon, oui, une CALayer filtrée serait la bonne façon de le faire. Si NSBitmapImageRep était disponible, vous pourriez faire un flou primitif en y dessinant le texte, en rétrécissant l'image (downsampling), puis en agrandissant l'image à nouveau (upsampling) - malheureusement, il semble également manquer. J'ai vu du texte flou dans Flash, qui (le dernier que j'ai vérifié) n'a pas de filtrage au niveau du pixel; vous pourriez essayer de chercher un tutoriel sur ce sujet et de voir ce que vous pouvez adapter à Cocoa Touch.

Answer 3

Si vous utilisez des couches alpha, vous obtiendrez un résultat de performance. Envisager une approche différente si possible (peut-être même précomposer le texte et l'aplatir dans un graphique au lieu de plusieurs couches). Essayez-le et utilisez Instruments pour vérifier les performances et voir si c'est acceptable. Si vous le faites dans une vue défilante, votre défilement va ralentir un lot.

Answer 4

Jetez un oeil à l'exemple d'iPhone GLImageProcessing d'Apple. Il fait du flou, entre autres choses.

Le code correspondant comprend:

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); 
}