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

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

这是结果: 蒙面文本

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

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