Как заставить текст светиться?

Question

Можем ли мы применить эффект свечения к любому тексту, как показано ниже:

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

Нужен ли для этого специальный шрифт?

Answer 1

Как насчет установки синей тени для просмотра текста с помощью android:shadowColor и установки android:shadowDx и android:shadowDy на ноль, с довольно большой android:shadowRadius?

Answer 2

<TextView
    android:id="@+id/glowingText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:shadowColor="#cf1d1d"
    android:shadowDx="0.0"
    android:shadowDy="0.0"
    android:shadowRadius="8"
    android:text="Radioactive"
    android:textColor="#cf1d1d"
    android:textSize="20sp" />

я рекомендую добавить отступы, потому что эффект тени / свечения увеличивает необходимое пространство.

Для пользовательских шрифтов создайте папку с именем «шрифты» в папке с активами.Затем поместите ваши файлы .ttf в него.Вы можете конвертировать .otf файлы онлайн, есть много сайтов.

Поместите это в свой класс

Typeface myFont = Typeface.createFromAsset(getAssets(), "fonts/yourCustomFont.ttf");

, и вот как вы устанавливаете шрифт для вашего textview

yourTextView.setTypeface(myFont);

Я проверил эффект свечения, и он работает спользовательские шрифты тоже.Имейте в виду, что вам, возможно, придется уменьшить размер текста, потому что пользовательские шрифты по некоторым причинам больше.Я использовал половину размера sp, который обычно использовал бы.

Answer 3

Для расширенных текстовых эффектов:

Есть ли способ добавить внутреннюю тень в TextView на Android?

В частности: MagicTextView

Я использовал его для светодиодных индикаторов HD Widgets: https://market.android.com/details?id=cloudtv.hdwidgets

Answer 4

Бемму прав. Это лучший способ, без прохождения полного маршрута OpenGL. Вы также должны убедиться, что TextView имеет отступы для акватации с каждой стороны, в противном случае тень большого радиуса, соответствующая цвету исходного текста (или немного более яркому оттенку), покажет обрезку капли на каждой стороне TextView.

Возможно, вы даже сможете добиться еще большего эффекта размытия, создав многослойную группу представлений с эффектами увеличения / уменьшения тени в виде тени (однако, не уверен, как будет выглядеть отрисовка)

Answer 5

У меня был обходной путь для выполнения требования, но он все еще не совершенен ....

Результат выборки:

https://cloud.githubusercontent.com/assets/5714437/3962552/d5c29fee-276c-11e4-9ea3-d1b31d8c54ac.png

Ключевой момент: * Giveрисовать и рисовать восемь раз в onDraw() из TextView *

public class ShadowTextView extends TextView {
private final Paint mStrokePaint = new Paint();
private final Rect mTextBounds = new Rect();
public ShadowTextView(Context context) {
    super(context);
    setupPaint();
}

public ShadowTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setupPaint();
}

public ShadowTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setupPaint();
}

protected void onDraw(Canvas canvas) {
    // Get the text to print
    final String text = super.getText().toString();
    // Figure out the drawing coordinates
    super.getPaint().getTextBounds(text, 0, text.length(), mTextBounds);
    float radius = (float) Math.hypot(3, 3);
    // draw everything
    drawShadow(canvas, text, 0, 3);
    drawShadow(canvas, text, 0, -3);
    drawShadow(canvas, text, 3, 0);
    drawShadow(canvas, text, -3, 0);

    drawShadow(canvas, text, radius, radius);
    drawShadow(canvas, text, -radius, radius);
    drawShadow(canvas, text, radius, -radius);
    drawShadow(canvas, text, -radius, radius);

    super.onDraw(canvas);
}

private void drawShadow (Canvas canvas, String text, float dx, float dy) {
    mStrokePaint.setShadowLayer(3, dx, dy, Color.BLACK);
    mStrokePaint.setXfermode(new PorterDuffXfermode(Mode.SRC_ATOP));
    canvas.drawText(text,
            0.0f + this.getPaddingLeft() * 1.0f , (super.getHeight() + mTextBounds.height()) * 0.5f,
            mStrokePaint);
}

private final void setupPaint() {
    mStrokePaint.setAntiAlias(true);
    mStrokePaint.setStyle(Paint.Style.FILL);
    // setup stroke
    mStrokePaint.setColor(0x75000000);
    mStrokePaint.setStrokeWidth(5);
    mStrokePaint.setTextSize(super.getTextSize());
    mStrokePaint.setFlags(super.getPaintFlags());
    mStrokePaint.setTypeface(super.getTypeface());
    mStrokePaint.setStrokeCap(Cap.ROUND);
    mStrokePaint.setStrokeJoin(Join.ROUND);
}

}

Answer 6

Вот простой CSS3 для эффекта свечения

.button {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 48px/normal "Warnes", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.button:hover {
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
}
body{background:#000;}

<link async href="http://fonts.googleapis.com/css?family=Warnes" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>

<div class="button">Neel UPadhyay</div>