Jak rozświetlić tekst?


82

Czy możemy zastosować efekt poświaty do dowolnego tekstu, jak pokazano poniżej:

wprowadź opis obrazu tutaj

Zaktualizowano: Powiedz mi również, czego potrzebuję, aby utworzyć coś takiego:wprowadź opis obrazu tutaj

Czy potrzebuję do tego specjalnej czcionki?


Myślę, że drugie pytanie powinieneś zadać jako kolejne pytanie. W każdym razie prawdopodobnie potrzebujesz do tego niestandardowej klasy View. Może jest to możliwe z niestandardowymi czcionkami, ale polecam utworzenie dla niego widoku i obsługę rysunku w metodzie onDraw ().
Zsombor Erdődy-Nagy

Dzięki za info Scythe, ale gdybym wiedział, co mi mówisz, nie zadawałbym tutaj pytań. proste zdania nie będą działać dla początkujących, takich jak ja ... Więc proszę wyjaśnij trochę, podaj kilka pomocnych przykładów lub przynajmniej link do odniesienia ...
Farhan

przepraszam, że cię tutaj pytam: czy możesz mi powiedzieć, jaki jest układ paska wyszukiwania na twoim pierwszym
zdjęciu

@pengwang ... hehe .. po prostu kopiuję zdjęcia z google, jedyne, czego chcę, to zapytać was ludzi o efekt poświaty ... i myślę, że jego wyśrodkowany i układ może być liniowy ...
Farhan

Odpowiedzi:


122

Co powiesz na ustawienie niebieskiego cienia dla widoku tekstu, używając android:shadowColori ustawiając android:shadowDxi android:shadowDyna zero, z całkiem dużym android:shadowRadius?


1
Używam tego, ale bez efektu ... xml to: <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 =" pogrubiony "android: shadowColor =" # 0000ff "android: textColor =" # 0000ff "android: shadowDx =" 0.0 "android: shadowDy =" 0.0 "android: shadowRadius =" 280 "/> również próbował 210 ... ten sam wynik ...
Farhan

62
Uwielbiam to, że dostałem odznakę „oświecenia” za pytanie o efekt poświaty.
Bemmu,

czy można to zrobić w przypadku tekstu na przyciskach z przezroczystym tłem?
lis

1
Witaj @Bemmu, dałem <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>. Ale to nie pokazuje ciemniejszego cienia. To, czego chcę, to ciemniejszy cień pbs.twimg.com/media/BnqtvaaIAAAVU8y.jpg To, co mogę teraz stworzyć, to pbs.twimg.com/media/Bnqqk03IYAAGA1U.png Pomóż mi uczynić cień ciemniejszym
KK_07k11A0585

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

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ł.


2

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)


1

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

}

-9

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>


4
Pytanie jest świecącym tekstem w Androidzie, ale odpowiedziałeś za pomocą koncepcji internetowej
eli,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.