以下に示すようなテキストにグローイング効果を適用できますか?
更新:次のようなものを作成するために必要なものも教えてください:
これには特別なフォントが必要ですか?
以下に示すようなテキストにグローイング効果を適用できますか?
更新:次のようなものを作成するために必要なものも教えてください:
これには特別なフォントが必要ですか?
回答:
どのように使ってTextViewのための青い影の設定についてandroid:shadowColor
・設定android:shadowDx
とandroid:shadowDy
かなり大きいと、ゼロに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" />
シャドウ/グロー効果によって必要なスペースが増えるため、パディングを追加することをお勧めします。
カスタムフォントの場合は、アセットフォルダーに「fonts」という名前のフォルダーを作成します。次に、.ttfファイルをその中に入れます。あなたはたくさんのウェブサイトがあるオンラインで.otfファイルを変換することができます。
これをあなたのクラスに入れてください
Typeface myFont = Typeface.createFromAsset(getAssets(), "fonts/yourCustomFont.ttf");
これがフォントをテキストビューに設定する方法です
yourTextView.setTypeface(myFont);
グロー効果をテストしましたが、カスタムフォントでも機能します。カスタムフォントは何らかの理由で大きいため、テキストのサイズを小さくする必要がある場合があることに注意してください。私は通常使用するspサイズの半分を使用しました。
ベムは正しい。これは、完全なOpenGLルートを使用せずに断然最善の方法です。また、TextViewの両側に適切なパディングが設定されていることを確認する必要があります。そうしないと、元のテキストの色と一致する大きな半径の影(またはわずかに明るい色合い)で、TextViewの両側にドロップシャドウのクリッピングが表示されます。
ドロップシャドウ効果を増減するレイヤードビューグループを作成することで、さらに多くのブラー効果を実現できる場合もあります(ただし、レンダリングパフォーマンスがどのようになるかはわかりません)。
要件を達成するための回避策がありましたが、それでも完全ではありません。
サンプル結果:
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);
}
}
これがグロー効果のための簡単な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>