2011-04-17 27 views
70

podemos aplicar efecto brillante a cualquier texto, como se muestra a continuación:¿Cómo hacer que el texto brille?

enter image description here

Actualizado: Por favor también dígame qué cosas necesito para crear algo como esto: enter image description here

qué necesito una Fuente especial para esto?

+0

creo que debe publicar la segunda como otra pregunta. De todas formas, probablemente necesites una clase de Vista personalizada para esa. Tal vez sea posible con fuentes personalizadas, pero recomiendo crear una vista para él y manejar el dibujo en el método onDraw(). –

+0

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

+0

lamento preguntarle aquí: ¿me puede decir cuál es el diseño de la barra de búsqueda en tu primera foto – pengwang

Respuesta

109

Cómo sobre la configuración de una sombra azul para el TextView usando android:shadowColor y el establecimiento de android:shadowDx y android:shadowDy a cero, con una bastante grande android:shadowRadius?

+1

I usar esto, pero ningún efecto ... XML es: \t también intenté 210 ... mismo resultado ... – Farhan

+0

yup tienes razón ... pero poco cambio. set shadowradius = "8" ... – Farhan

+46

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

2

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

Usted podría incluso ser capaz de lograr aún más de un efecto de desenfoque mediante la creación de un grupo de la vista en capas con el aumento/disminución de efectos dropshadow (no sé lo que rinden perf sería como sin embargo)

5

Para efectos de texto avanzados:

Is there a way to add inner shadow to a TextView on Android?

En particular: MagicTextView

que lo utilizaron para HD Widgets LEDs: https://market.android.com/details?id=cloudtv.hdwidgets

+0

+1 ... que es hermosa, bonita aplicación tooo ... – Farhan

+0

La nueva versión sale el jueves y tendrá efectos similares a la segunda captura de pantalla. No pude obtener todo lo detallado porque el tamaño del texto varía y obtendría bordes "brillantes" en diseños más pequeños. – radley

1

que tenía una solución para cumplir el requisito, pero todavía no es perfecto ....

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 en onDraw() de Vista de Texto *

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); 
} 

} 
1
<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 añadir un relleno, b Porque el efecto de sombra/resplandor 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. Puede convertir archivos .otf en línea, hay muchos sitios web.

poner esto en su clase

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

y así es como se establece la fuente a su TextView

yourTextView.setTypeface(myFont); 

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

0

Aquí es un simple para CSS3 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>

Cuestiones relacionadas