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



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



enter image description here



обновление: также скажите, пожалуйста, какие вещи мне нужно создать что-то вроде этого:enter image description here



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

630   6  

6 ответов:

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

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

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

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

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

<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" />

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

для пользовательских шрифтов создайте папку с именем "шрифты" в папке Assets. Тогда ставь свою .файлы ttf внутри него. Вы можете конвертировать .OTF файлы в интернете есть много веб-сайтов.

положите это в свой класс

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

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

yourTextView.setTypeface(myFont);

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

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

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

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

результат примера:

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

ключевой момент: * дайте краску, и нарисуйте восемь раз в 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);
}

}

вот простой 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>

Comments

    Ничего не найдено.