Czy możemy zastosować efekt poświaty do dowolnego tekstu, jak pokazano poniżej:
Zaktualizowano: Powiedz mi również, czego potrzebuję, aby utworzyć coś takiego:
Czy potrzebuję do tego specjalnej czcionki?
android
user-interface
graphics
textview
Farhan
źródło
źródło
Odpowiedzi:
Co powiesz na ustawienie niebieskiego cienia dla widoku tekstu, używając
android:shadowColor
i ustawiającandroid:shadowDx
iandroid:shadowDy
na zero, z całkiem dużymandroid:shadowRadius
?źródło
<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" />
Polecam dodać wypełnienie, ponieważ efekt cienia / blasku zwiększa potrzebną przestrzeń.
W przypadku czcionek niestandardowych utwórz folder o nazwie „czcionki” w folderze zasobów. Następnie umieść w nim swoje pliki .ttf. Możesz konwertować pliki .otf online, istnieje wiele witryn internetowych.
Umieść to w swojej klasie
Typeface myFont = Typeface.createFromAsset(getAssets(), "fonts/yourCustomFont.ttf");
i tak ustawiasz czcionkę w widoku tekstu
yourTextView.setTypeface(myFont);
Przetestowałem efekt blasku i działa również z niestandardowymi czcionkami. Pamiętaj, że być może będziesz musiał zmniejszyć rozmiar tekstu, ponieważ niestandardowe czcionki są z jakiegoś powodu większe. Użyłem połowy rozmiaru sp, którego normalnie bym używał.
źródło
Bemmu ma rację. To zdecydowanie najlepszy sposób bez przechodzenia przez pełną trasę OpenGL. Chcesz również upewnić się, że TextView ma dopełnienie akwate ustawione po każdej stronie, w przeciwnym razie cień o dużym promieniu, który pasuje do koloru tekstu pochodzenia (lub nieco jaśniejszy odcień), pokaże obcinanie cienia po każdej stronie TextView.
Możesz nawet osiągnąć jeszcze większy efekt rozmycia, tworząc warstwową grupę widoków z rosnącymi / malejącymi efektami cieniowania (nie jestem jednak pewien, jaka byłaby perfekcja renderowania)
źródło
Znalazłem obejście, aby spełnić to wymaganie, ale nadal nie jest ono idealne ....
Przykładowy wynik:
https://cloud.githubusercontent.com/assets/5714437/3962552/d5c29fee-276c-11e4-9ea3-d1b31d8c54ac.png
Kluczowy punkt: * Daj Paint i rysuj osiem razy
onDraw()
z 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); } }
źródło
Oto prosty css3 dla efektu blasku
.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>
źródło