Как отобразить текст с двухцветным фоном?

Мне нужно создать приложение для Android, где 2-цветный текст будет отображаться на 2-цветном фоне. См. Снимок слева. Затем линия должна быть перемещена с анимацией, а изображение результата должно быть как на картинке справа.

У меня есть следующие вопросы:

  • Должен ли я использовать некоторый движок 2d для этого? Или, будет ли нормально использовать стандартные представления? Как это сделать?
  • Как нарисовать текст, как на изображениях?

pic1 --------- pic2

ОТВЕТЫ

Ответ 1

В Android графике API я бы использовал путь клипа для создания области клипа. Шаги:

  • заливка с черным цветом:

black canvas

  • нарисуйте белый текст на холсте:

enter image description here

  • создайте путь клипа и примените его к вашему холсту (см. Canvas.clipPath(путь))
  • заливка с белым цветом:

enter image description here

  • нарисуйте тот же текст, что и на шаге 2 в черном холсте:

enter image description here

Ответ 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();
    }
}

Это результат: Маскированный текст

Ответ 3

Это не полный ответ. Я просто даю советы. Я знаю одно возможное решение, как вы можете сделать снимок слева и картинку справа. Но часть, которую я не могу понять, - это анимация. Я имею в виду, если вы хотите гладкую анимацию между состояниями. Если вы просто хотите поменять взгляды, что легко, просто взгляните на него, и я не думаю, что вы хотите достичь этого...

Одна из вещей, которую вы можете сделать, - установить фоновый цвет, скажем, с шириной 320 и пусть скажем 0-160 белый и 160-320 черный. Тогда

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

конечно, вам нужно будет сделать точный подсчет того, сколько букв будет черным и сколько белого, но это понятие