2色の背景のテキストを表示する方法は？

Question

アンドロイド用のアプリケーションを作成する必要があります。ここでは、2色のテキストが2色の背景に表示されます。左の画像を参照してください。次に、線をアニメーションで移動し、結果画像を右の画像のようにする必要があります。

私は、次の質問がある：

1. は、私はこれを行うには、いくつかの2Dエンジンを使用する必要がありますか？または、標準ビューを使用するのは問題ありませんか？どうやってするの？
2. 写真のようにテキストを描画するにはどうすればよいですか？

---------

Answer 1

これは私が提案を与える完全な答えではありません。 私は1つの可能な解決策を知っています。どのように左の写真を撮り、右の写真を撮ることができますか？しかし、私が理解できない部分はアニメーションです。状態間の滑らかなアニメーションが必要な場合は、私は意味します。あなただけの簡単なビューを交換したい場合は、ちょうどビューのフリッパとそれを取るが、私はあなたがそれを達成したいとは思わない...

あなたができることの一つは、 320幅と言うと0-160白と160-320黒と言う。そして、当然の

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

あなたは黒とどのように多くの白になりますどのように多くの文字の正確な計算を行う必要がありますが、それは私はクリップを使用することになりアンドロイドグラフィックAPIでコンセプト

Answer 2

ですパスを使用してクリップ領域を作成します。 手順：黒と

• フィルキャンバス：

• キャンバス上であなたの白いテキストを描画：

• （Canvas.clipPath(Path)を参照）白い色で塗りつぶしキャンバスクリップパスを作成し、キャンバスにそれを適用します。キャンバスに黒のステップ2と同じテキストを描画

• を：

Answer 3

PorterDuffフィルタを使用してテキストをマスクするカスタム表示を作成できます。ここで

それがどのように見えるかです：

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

これが結果です： Masked text