如何让文字发光？

Question

我们能否像下面展示的那样对任何文本应用发光效果：

更新：请告诉我创建类似于此的东西需要什么：

我需要特殊字体吗？

- Farhan

---

我认为你应该将第二个问题作为另一个问题发布。无论如何，你可能需要一个自定义的View类来完成这个问题。也许使用自定义字体可以实现，但我建议创建一个View，并在onDraw()方法中处理绘制。 - Zsombor Erdődy-Nagy

谢谢你的信息，Scythe。但是如果我知道你告诉我的内容，我就不会在这里问问题了。对于像我这样的初学者来说，简单的句子行不通...所以请解释一下并给出一些支持性的例子或至少一个参考链接... - Farhan

很抱歉在这里打扰您，能否告诉我您第一张图片中SeekBar的布局是怎样的？ - pengwang

@pengwang... 嘿嘿..我只是从谷歌上复制了这些图片，我想问你们关于发光效果的想法..我认为它应该居中，并且布局可以是线性的.. - Farhan

Answer 1

通过使用 android:shadowColor 将文本视图设置为蓝色阴影，将 android:shadowDx 和 android:shadowDy 设置为零，并使用相当大的 android:shadowRadius，怎么样？

- Bemmu

---

我使用了这个代码，但没有效果... 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

很高兴我因一个关于发光效果的问题而获得了“启迪”徽章。 - Bemmu

有没有办法对具有透明背景的按钮文本执行此操作？ - lis

你好 @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>。但是它没有显示出更深的阴影.. 我想要更深的阴影 https://pbs.twimg.com/media/BnqtvaaIAAAVU8y.jpg 目前我能够产生的效果是 https://pbs.twimg.com/media/Bnqqk03IYAAGA1U.png 请帮助我如何使阴影更深 - KK_07k11A0585

Answer 2

<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 大小的字体。

- ORY

Answer 3

Bemmu是正确的。这是最好的方法，而不用走完整个OpenGL路线。你还要确保TextView在每一侧都有适当的填充设置，否则一个大半径阴影将显示在TextView的每一侧剪切掉落影。

你甚至可以通过创建具有递增/递减的落影效果的分层视图组来实现更多的模糊效果（但不确定渲染性能如何）

- MrSewerPickle

Answer 4

我有一种方法可以实现需求，但仍不完美...

样例结果:

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

重点：* 在TextView的onDraw()方法中给出画笔，并且绘制八次 *

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

}

- Hsiao-Ting

Answer 5

这里是一个简单的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>

- neel upadhyay

---

问题是在安卓中显示发光文本，但你用网络概念回答了。 - eli