¿Cómo hacer que el texto brille?


82

¿Podemos aplicar un efecto brillante a cualquier texto como se muestra a continuación?

ingrese la descripción de la imagen aquí

Actualizado: Por favor, dígame también qué cosas necesito para crear algo como esto:ingrese la descripción de la imagen aquí

¿Necesito una fuente especial para esto?


Creo que deberías publicar la segunda como otra pregunta. De todos modos, probablemente necesite una clase de Vista personalizada para ese. Tal vez sea posible con fuentes personalizadas, pero recomiendo crear una Vista para ella y manejar el dibujo en el método onDraw ().
Zsombor Erdődy-Nagy

Gracias por la información Scythe, pero si supiera lo que me estás diciendo, no estaría haciendo una pregunta aquí. las oraciones simples no funcionarán para principiantes como yo ... Así que por favor explique un poco, dé algunos ejemplos de apoyo o al menos un enlace para referirse a ...
Farhan

Lamento preguntarle aquí: ¿puede decirme cuál es el diseño de la barra de búsqueda en su primera foto?
pengwang

@pengwang ... jeje ... acabo de copiar las imágenes de google, lo único que quiero es preguntarles sobre el efecto brillante ... y creo que su centrado y el diseño pueden ser lineales ...
Farhan

Respuestas:


122

¿Qué tal establecer una sombra azul para la vista de texto usando android:shadowColory estableciendo android:shadowDxy android:shadowDyen cero, con un tamaño bastante grande android:shadowRadius?


1
Yo uso esto pero no tiene efecto ... xml es: <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Glow" android: textSize = "40sp" android: id = "@ + id / id_tv_GlowText "android: textStyle =" bold "android: shadowColor =" # 0000ff "android: textColor =" # 0000ff "android: shadowDx =" 0.0 "android: shadowDy =" 0.0 "android: shadowRadius =" 280 "/> también intenté 210 ... mismo resultado ...
Farhan

62
Me encanta que obtuve la insignia "iluminada" por una pregunta sobre un efecto de brillo.
Bemmu

¿Hay alguna forma de hacer esto para el texto de los botones con fondo transparente?
lis

1
Hola @Bemmu, le di <code> <item name = "android: shadowColor"> @ android: color / black </item> <item name = "android: shadowDx"> 0.0 </item> <item name = "android: shadowDy "> 0.0 </item> <item name =" android: shadowRadius "> 5 </item> </code>. Pero no muestra una sombra más oscura. Lo que quiero es una sombra más oscura pbs.twimg.com/media/BnqtvaaIAAAVU8y.jpg Lo que puedo producir ahora es pbs.twimg.com/media/Bnqqk03IYAAGA1U.png Por favor, ayúdeme a oscurece la sombra
KK_07k11A0585

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

Recomiendo agregar un relleno, porque el efecto de sombra / brillo aumenta el espacio necesario.

Para fuentes personalizadas, cree una carpeta con el nombre "fuentes" en su carpeta de activos. Luego ponga sus archivos .ttf dentro de él. Puede convertir archivos .otf en línea, hay muchos sitios web.

Pon esto en tu clase

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

y así es como configura la fuente para su vista de texto

yourTextView.setTypeface(myFont);

He probado el efecto de brillo y también funciona con fuentes personalizadas. Tenga en cuenta que tal vez deba reducir el tamaño de su texto porque las fuentes personalizadas son, por alguna razón, más grandes. Usé la mitad del tamaño de sp que normalmente usaría.


2

Bemmu tiene razón. Esa es la mejor manera, con mucho, sin pasar por la ruta completa de OpenGL. También desea asegurarse de que TextView tenga un conjunto de relleno adecuado en cada lado, de lo contrario, una sombra de radio grande que coincida con el color del texto de origen (o un tono ligeramente más brillante) mostrará el recorte de la sombra en cada lado de TextView.

Incluso es posible que pueda lograr un efecto de desenfoque aún mayor creando un grupo de vistas en capas con efectos de sombras crecientes / decrecientes (sin embargo, no estoy seguro de cómo sería el rendimiento de procesamiento)


1

Tuve una solución para lograr el requisito, pero aún no es perfecta ...

El resultado de la muestra:

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

Punto clave: * Dar una pintura y dibujar ocho veces onDraw()desde 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);
}

}

-9

Aquí hay un css3 simple para el efecto de brillo

.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>


4
La pregunta es texto brillante en Android, pero ha respondido usando el concepto web
eli
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.