テキストを光らせる方法は?


82

以下に示すようなテキストにグローイング効果を適用できますか?

ここに画像の説明を入力してください

更新:次のようなものを作成するために必要なものも教えてください:ここに画像の説明を入力してください

これには特別なフォントが必要ですか?


別の質問として2番目の質問を投稿する必要があると思います。とにかく、おそらくそのためのカスタムViewクラスが必要です。カスタムフォントでも可能かもしれませんが、ビューを作成し、onDraw()メソッドで描画を処理することをお勧めします。
–ZsomborErdődy-Nagy 2011

情報サイスに感謝しますが、あなたが私に言っていることを知っていれば、ここで質問することはありません。簡単な文章は私のような初心者にはうまくいきません...それで、いくつかの裏付けとなる例を与えるか、少なくとも参照するためのリンクを与えてください...
Farhan 2011

ここでお聞きして申し訳ありません。最初の写真のシークバーのレイアウトを教えてください
pengwang 2011

@pengwang ... hehe ..グーグルから写真をコピーするだけです。私が欲しいのは、光る効果について人々に尋ねることだけでした...そしてその中心とレイアウトは直線的であると思います...
Farhan 2011

回答:


122

どのように使ってTextViewのための青い影の設定についてandroid:shadowColor・設定android:shadowDxandroid:shadowDyかなり大きいと、ゼロに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

62
グロー効果についての質問で「悟りを開いた」バッジを取得したことが大好きです。
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");

これがフォントをテキストビューに設定する方法です

yourTextView.setTypeface(myFont);

グロー効果をテストしましたが、カスタムフォントでも機能します。カスタムフォントは何らかの理由で大きいため、テキストのサイズを小さくする必要がある場合があることに注意してください。私は通常使用するspサイズの半分を使用しました。


2

ベムは正しい。これは、完全なOpenGLルートを使用せずに断然最善の方法です。また、TextViewの両側に適切なパディングが設定されていることを確認する必要があります。そうしないと、元のテキストの色と一致する大きな半径の影(またはわずかに明るい色合い)で、TextViewの両側にドロップシャドウのクリッピングが表示されます。

ドロップシャドウ効果を増減するレイヤードビューグループを作成することで、さらに多くのブラー効果を実現できる場合もあります(ただし、レンダリングパフォーマンスがどのようになるかはわかりません)。


1

要件を達成するための回避策がありましたが、それでも完全ではありません。

サンプル結果:

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

キーポイント:*ペイントを与え、onDraw()TextViewから8回描画します*

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
質問はアンドロイドの輝くテキストですが、あなたはウェブコンセプトを使用して答えました
eli 2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.