Як зробити так, щоб текст світився?


82

Чи можемо ми застосувати ефект свічення до будь-якого тексту, як показано нижче:

введіть тут опис зображення

Оновлено: Будь ласка, також повідомте мені, які речі мені потрібні, щоб створити щось подібне:введіть тут опис зображення

Чи потрібен для цього спеціальний шрифт?


Думаю, вам слід розмістити друге як ще одне питання. У будь-якому випадку, вам, мабуть, потрібен спеціальний клас View для цього. Можливо, це можливо за допомогою спеціальних шрифтів, але я рекомендую створити для нього подання та обробити креслення методом onDraw ().
Zsombor Erdődy-Nagy

Подяка за інформацію Scythe, але якби я знав, що ви мені говорите, я б не став тут запитувати. прості речення не працюватимуть для таких початківців, як я ... Тож поясніть трохи, дайте кілька допоміжних прикладів або хоча б посилання, на яке можна посилатися ...
Фархан,

Мені шкода, що я вас запитав тут: чи можете ви сказати мені, яким є розташування панелі пошуку на вашому першому
знімку

@pengwang ... хе-хе .. я просто копіюю зображення з google, єдине, що я хочу, - це запитати вас про ефект сяючого ... і я думаю, що його центр та макет можуть бути лінійними ...
Фархан,

Відповіді:


122

Як щодо встановлення синьої тіні для текстового перегляду за допомогою android:shadowColorі встановлення android:shadowDxі android: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 ... той самий результат ...
Фархан

62
Люблю, що я отримав «просвітлений» значок за запитання про ефект світіння.
Bemmu

чи є спосіб зробити це для тексту на кнопках із прозорим фоном?
Лис

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

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

я рекомендую додати відступ, оскільки ефект тіні / світіння збільшує необхідний простір.

Для спеціальних шрифтів створіть папку з назвою "шрифти" у папці ваших активів. Потім помістіть свої файли .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 *

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
Питання - світиться текст в android, але ви відповіли, використовуючи веб-концепцію
eli
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.