如何使文字发光?


82

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

在此处输入图片说明

更新:请也告诉我创建这样的东西需要什么:在此处输入图片说明

我需要特殊字体吗?


我认为您应该将第二个问题发布为另一个问题。无论如何,您可能需要为该类定制一个View类。也许使用自定义字体是可行的,但是我建议为其创建一个View并在onDraw()方法中处理图形。
ZsomborErdődy-Nagy2011年

感谢信息大镰刀,但如果我知道您在说什么,我就不会在这里问问题。简单的句子对像我这样的初学者是行不通的...所以请解释一下,给出一些支持的例子,或者至少提供一个链接来引用...
Farhan

对不起,我要在这里问你:你能告诉我什么搜索条在你的第一张图的布局
pengwang

@pengwang ...呵呵..我只是从Google复制图片,我唯一想做的就是问大家关于发光效果的问题...而且我认为它的居中和布局可以是线性的……
Farhan

Answers:


122

如何通过使用android:shadowColor和设置,android:shadowDxandroid:shadowDy为零设置textview的蓝色阴影,并设置一个很大的值android:shadowRadius呢?


1
我用这个但没有效果... xml是:<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“ />也尝试了210 ...同样的结果...
Farhan

61
我很喜欢我获得“开明”徽章以询问有关发光效果的问题。
Bemmu 2011年

有没有办法对透明背景的按钮上的文本执行此操作?
lis 2013年

1
您好@Bemmu,我给了<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>。但是它并没有显示出更暗的阴影。我想要的是更暗的阴影 pbs.twimg.com/media/BnqtvaaIAAAVU8y.jpg我现在能生产的是 pbs.twimg.com/media/Bnqqk03IYAAGA1U.png请帮助我使阴影更暗
KK_07k11A0585 2014年

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

我建议添加一个填充,因为阴影/发光效果会增加所需的空间。

对于自定义字体,在资产文件夹中创建一个名称为“ fonts”的文件夹。然后将您的.ttf文件放入其中。您可以在线转换.otf文件,这里有很多网站。

把这个放在你的课上

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

这就是将字体设置为textview的方式

yourTextView.setTypeface(myFont);

我已经测试了发光效果,它也可以与自定义字体一起使用。请记住,由于某些原因,自定义字体会更大,因此您可能必须减小文本的大小。我用的是我通常使用的sp大小的一半。


2

Bemmu是对的。到目前为止,这是最好的方法,无需进行完整的OpenGL路由。您还需要确保TextView的每一侧都设置了浅绿色填充,否则,与原文本颜色匹配(或略微亮一些的阴影)的大半径阴影将在TextView的每一侧上显示阴影修剪。

通过创建具有增加/减少的阴影效果的分层视图组,您甚至甚至可以实现更多的模糊效果(但是不确定渲染性能如何)


1

我有一种解决方法可以满足要求,但仍然不够完美。

样本结果:

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

}

-9

这是发光效果的简单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>


4
问题是android中的发光文本,但您已经使用网络概念回答了
-eli
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.