¿Podemos aplicar un efecto brillante a cualquier texto como se muestra a continuación?
Actualizado: Por favor, dígame también qué cosas necesito para crear algo como esto:
¿Necesito una fuente especial para esto?
¿Podemos aplicar un efecto brillante a cualquier texto como se muestra a continuación?
Actualizado: Por favor, dígame también qué cosas necesito para crear algo como esto:
¿Necesito una fuente especial para esto?
Respuestas:
¿Qué tal establecer una sombra azul para la vista de texto usando android:shadowColor
y estableciendo android:shadowDx
y android:shadowDy
en cero, con un tamaño bastante grande android:shadowRadius
?
<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.
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)
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);
}
}
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>