如何显示双色背景的文字？

Question

我需要为Android创建一个应用程序，其中双色文本将显示在双色背景上。见左图。然后，应该用动画移动线条，结果图像应该像右边的图片一样。

我有以下问题：

1. 我应该使用一些2d引擎吗？或者，使用标准视图是否可以？怎么做？
2. 如何在图片上绘制文字？

---------

Answer 1

在 Android 图形 API 中，我会使用剪辑路径来创建剪辑区域。 步骤进行：

• 用黑色填充画布：

• 在画布上绘制白色文字：

• 创建剪辑路径并将其应用到画布（请参阅Canvas.clipPath(Path)）
• 用白色填充画布：

• 在画布上用黑色绘制与步骤2相同的文字：

Answer 2

您可以使用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

Answer 3

这不完全是我给出建议的答案。 我知道一种可能的解决方案，你如何在左边拍照，在右边照片。但我想不出的部分是动画。我的意思是如果你想在状态之间平滑动画。如果你只是想交换容易的视图，只需要观察一下fliper，但是我不认为你想实现那个......

你可以做的一件事就是设置背景让我们说320宽度，然后说0-160白色和160-320黑色。然后

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

当然你需要精确计算出多少个字母将是黑色和多少个白色，但这就是概念