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

Question

我需要为Android创建一个应用程序，在其中将显示两色文本和两色背景。请参见左边的图片。然后，应使用动画移动行，并且结果图像应该像右边的图片一样。

我有以下问题：

1. 我应该使用2D引擎来完成此操作吗？还是使用标准视图可以？如何操作？
2. 如何像图片上那样绘制文本？

---------

- LA_

---

我可以告诉你，这绝非易事。但一个很好的开端是使用一些自定义组件，例如画布(canvas)。 - Lukap

有没有任何函数可以根据背景颜色来反转文本颜色？ - LA_

你想好如何实现这个了吗？如果你没有，我可能有一个答案。 - Ludevik

@Ludevik，我还没有。那我就等你的回答了 ;) - LA_

四年后才开启悬赏？我想不出比下面的答案更简单的方法来使用Android图形API实现它。如果使用像Libgdx这样的游戏引擎，那么就很容易了。1.将白色文本绘制到帧缓冲对象上的黑色背景中。2.将掩码绘制为黑色的白色到另一个帧缓冲对象上。3.使用使用掩码反转颜色的着色器将两个帧缓冲对象的颜色纹理绘制到屏幕上。 - Tenfour04

我认为使用着色器应该很容易。 首先，在黑色背景上用白色绘制完整文本。然后，使用掩码反转所需部分的颜色... - danikaze

Answer 1

在安卓图形API中，我会使用剪辑路径创建剪辑区域。

• 用黑色填充画布：

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

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

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

- Ludevik

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

这是结果：掩码文本

- Pol

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

当然，您需要精确计算黑色和白色字母的数量，但这就是概念。

- Lukap

---

我认为有更简单的解决方案 - 我需要将文本绘制两次 - 首先用白色，然后用黑色。但我不应该使用标准的TextViews来实现这个。 - LA_

我只是建议你一种方法来做到这一点，我相信有更精确的解决方案来实现你想要做的事情，这只是我想到的第一个。 - Lukap

你找到其他解决方案了吗？ - Lukap