Come visualizzare testo con sfondo bicolore?

Question

Devo creare un'app per Android, in cui il testo a 2 colori verrà visualizzato sullo sfondo a 2 colori. Vedi l'immagine a sinistra. Quindi, la linea dovrebbe essere spostata con l'animazione e l'immagine risultante dovrebbe essere come nell'immagine a destra.

ho le seguenti domande:

1. Dovrei usare qualche motore 2d per fare questo? Oppure, sarà OK utilizzare le viste standard? Come farlo?
2. Come disegnare il testo come nelle immagini?

---------

Answer 1

Questo non è risposta completa ho solo dare suggerimenti. Conosco una soluzione possibile come si può fare l'immagine a sinistra e l'immagine a destra. Ma la parte che non riesco a capire è l'animazione. Voglio dire se vuoi animazioni fluide tra stati. Se vuoi semplicemente scambiare le viste che è facile, basta vedere il flipper e quello, ma non penso che tu voglia conseguirlo ...

Una delle cose che puoi fare è impostare lo sfondo lascia diciamo con larghezza 320 e diciamo 0-160 bianco e 160-320 nero. Poi

tv.setText(Html.fromHtml("<font color='black'>black on white</font> <font color='white'>white on black</font>")); 

, naturalmente, si avrà bisogno di fare un calcolo preciso di come molte lettere saranno neri e quante bianco, ma che è il concetto

Answer 2

In Android grafica API userei la clip percorso per creare una regione di clip. Passi:

• tela di riempimento con colore nero:

• disegnare il testo bianco su tela:

• creare il percorso della clip e applicarlo alla tua tela (vedi Canvas.clipPath(Path))
• tela di riempimento con il colore bianco:

• disegnare lo stesso testo al punto 2 in nero su tela :

Answer 3

È possibile creare una vista personalizzata che maschera il testo utilizzando un filtro PorterDuff.

Ecco come potrebbe apparire:

public class MaskedText extends View { 

    String sText; 
    Paint p, pReplace, pMask; 

    public MaskedText(Context context, AttributeSet attrs) { 
     super(context, attrs); 

     // base paint for you text 
     p = new Paint(Paint.ANTI_ALIAS_FLAG); 
     p.setTextSize(40); 
     p.setTextAlign(Paint.Align.CENTER); 
     p.setColor(0xFF000000); 
     p.setStyle(Paint.Style.FILL); 

     // replacement color you want for your the part of the text that is masked 
     pReplace = new Paint(p); 
     pReplace.setColor(0xFFFFFFFF); 
     pReplace.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER)); 

     // color of the drawing you want to mask with text 
     pMask = new Paint(); 
     pMask.setColor(0xFFFF0000); 
     pMask.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); 
    } 

    public void setText(String text) { 
     sText = text; 
    } 

    @Override 
    public void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 

     canvas.save(); 

     // here you draw the text with the base color. In your case black 
     canvas.drawText(sText, getWidth()/2, getHeight()/2, p); 

     // then draw the shape any graphics that you want on top of it 
     canvas.drawCircle(getWidth()/2, getHeight()/2, 50, pMask); 
     canvas.drawCircle(getWidth()/2 + 50, getHeight()/2 + 5, 20, pMask); 
     canvas.drawCircle(getWidth()/2 - 45, getHeight()/2 - 10, 30, pMask); 

     // finally redraw the text masking the graphics 
     canvas.drawText(sText, getWidth()/2, getHeight()/2, pReplace); 

     canvas.restore(); 
    } 
} 

questo è il risultato: Masked text