Как отобразить текст с двухцветным фоном?
Мне нужно создать приложение для Android, где 2-цветный текст будет отображаться на 2-цветном фоне. См. Снимок слева. Затем линия должна быть перемещена с анимацией, а изображение результата должно быть как на картинке справа.
У меня есть следующие вопросы:
- Должен ли я использовать некоторый движок 2d для этого? Или, будет ли нормально использовать стандартные представления? Как это сделать?
- Как нарисовать текст, как на изображениях?
--------- ![pic2]()
Ответы
Ответ 1
В Android графике API я бы использовал путь клипа для создания области клипа.
Шаги:
![black canvas]()
- нарисуйте белый текст на холсте:
![enter image description here]()
![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>"));
конечно, вам нужно будет сделать точный подсчет того, сколько букв будет черным и сколько белого, но это понятие