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

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

18 голосов
/ 12 сентября 2011

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

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

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

pic1 --------- pic2

Ответы [ 3 ]

16 голосов
/ 15 ноября 2011

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

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

black canvas

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

enter image description here

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

enter image description here

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

enter image description here

6 голосов
/ 23 октября 2015

Вы можете создать собственное представление, которое маскирует ваш текст, используя фильтр 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();
    }
}

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

1 голос
/ 13 сентября 2011

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

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

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

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

...