如何让文字发光?

我们能否将发光效果应用于如下所示的任何文本:

enter image description here

更新: 也请告诉我,我需要什么东西来创建这样的东西:enter image description here

我需要特殊的字体吗?

46514 次浏览

How about setting a blue shadow for the textview by using android:shadowColor and setting android:shadowDx and android:shadowDy to zero, with a pretty big android:shadowRadius?

Bemmu is right. Thats the best way by far without going the full OpenGL route. You want to also make sure the TextView has an aquate padding set on each side otherwise a large radius shadow that matches the origin text color (or a slight shade brighter) will show the dropshadow clipping on each side of the TextView.

You might even be able to achieve even more of a blur effect by creating a layered view group with increasing/decreasing dropshadow effects (not sure what render perf would be like however)

I had a workaround to achieve the requirement, but still not perfect....

The sample result:

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

Key point: * Give a Paint, and draw eight times in onDraw() from 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);
}


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

i recommend to add a padding, because the shadow/glow effect increases the needed space.

For custom fonts create a folder with the name "fonts" in your assets folder. Then put your .ttf files inside it. You can convert .otf files online there are lots of websites.

Put this in your Class

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

and this is how you set the font to your textview

yourTextView.setTypeface(myFont);

i have tested the glow effect and it works with custom fonts too. Keep in mind that you maybe have to decrease the size of your text because custom fonts are for some reason bigger. I used the half of the sp size that i normally would use.

Here is a simple css3 for glow effect

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