如何显示具有双色背景的文本？

Question

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

我有以下问题：

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

这不是完整的答案，我只是给出建议。 我知道一种可能的解决方案，你怎么能做左边的图片和右边的图片。但我想不通的部分是动画。我的意思是，如果您想要状态之间的平滑动画。如果您只想轻松交换视图，只需使用视图翻转器即可，但我认为您不想实现这一目标...

您可以做的一件事是设置背景，比如说 320 宽度，比如说 0-160 白色和 160-320 黑色。那么

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

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