Metin nasıl parlatılır?


82

Aşağıda gösterildiği gibi herhangi bir metne parıltı efekti uygulayabilir miyiz:

görüntü açıklamasını buraya girin

Güncellendi: Lütfen bana bunun gibi bir şey oluşturmak için neye ihtiyacım olduğunu da söyleyin:görüntü açıklamasını buraya girin

Bunun için özel bir yazı tipine ihtiyacım var mı?


Sanırım ikincisini başka bir soru olarak göndermelisiniz. Her neyse, muhtemelen bunun için özel bir View sınıfına ihtiyacınız var. Belki özel yazı tipleriyle mümkündür, ancak bunun için bir Görünüm oluşturmanızı ve onDraw () yönteminde çizimi işlemenizi öneririm.
Zsombor Erdődy-Nagy

Bilgi Scythe için teşekkürler ama bana ne söylediğini bilseydim, burada soru sormazdım. basit cümleler benim gibi yeni başlayanlar için işe yaramayacak ... Bu yüzden lütfen biraz açıklayın, destekleyici örnekler verin veya en azından başvurmak için bir bağlantı verin ...
Farhan

Burada size sorduğum için üzgünüm: ilk resminizdeki arama çubuğunun düzenini bana söyleyebilir misiniz
pengwang

@pengwang ... hehe .. resimleri google'dan kopyalıyorum, tek istediğim şey insanlara parlayan efekt hakkında sormaktı ... ve sanırım ortalanmış ve düzeni doğrusal olabilir ...
Farhan

Yanıtlar:


122

Kullanarak android:shadowColorve ayarlayarak metin görünümü için mavi bir gölge ayarlamaya android:shadowDxve android:shadowDyoldukça büyük bir değerle sıfırlamaya ne dersiniz android:shadowRadius?


1
Bunu kullanıyorum ama etkisi yok ... 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 "/> ayrıca 210'u denedi ... aynı sonuç ...
Farhan

62
Parlama efektiyle ilgili bir soru için "aydınlanmış" rozetimi aldığımı sevdim.
Bemmu

Saydam arka plana sahip düğmelerdeki metinler için bunu yapmanın bir yolu var mı?
lis

1
Merhaba @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>. Ama daha koyu gölge göstermiyor .. İstediğim daha koyu gölge pbs.twimg.com/media/BnqtvaaIAAAVU8y.jpg Şu anda üretebildiğim şey pbs.twimg.com/media/Bnqqk03IYAAGA1U.png Lütfen bana nasıl yapılacağına yardım edin gölgeyi koyulaştır
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" />

gölge / ışıma efekti gerekli alanı artırdığı için dolgu eklemenizi tavsiye ederim.

Özel yazı tipleri için varlıklar klasörünüzde "yazı tipleri" adıyla bir klasör oluşturun. Sonra .ttf dosyalarınızı bunun içine koyun. .Otf dosyalarını çevrimiçi olarak dönüştürebilirsiniz, birçok web sitesi vardır.

Bunu sınıfınıza koyun

Typeface myFont = Typeface.createFromAsset(getAssets(), "fonts/yourCustomFont.ttf");

ve bu, yazı tipini metin görünümünüze nasıl ayarladığınız

yourTextView.setTypeface(myFont);

parlama efektini test ettim ve özel yazı tipleriyle de çalışıyor. Özel yazı tipleri nedense daha büyük olduğundan metninizin boyutunu küçültmeniz gerekebileceğini unutmayın. Normalde kullanacağım sp boyutunun yarısını kullandım.


2

Bemmu haklı. Bu, tam OpenGL rotasına gitmeden açık ara en iyi yoldur. Ayrıca, TextView'in her iki tarafında su dolgusu olduğundan emin olmak istersiniz; aksi takdirde, orijinal metin rengiyle eşleşen büyük yarıçaplı bir gölge (veya daha parlak bir gölge), TextView'in her iki tarafındaki damla gölgesini gösterecektir.

Artan / azalan gölge efektlerine sahip katmanlı bir görünüm grubu oluşturarak daha da fazla bulanıklık efekti elde edebilirsiniz (ancak render performansının nasıl olacağından emin değilsiniz)


1

Gereksinimi yerine getirmek için bir çözümüm vardı, ancak yine de mükemmel değil ...

Örnek sonuç:

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

Anahtar nokta: * Bir Paint verin ve onDraw()TextView'dan sekiz kez çizim yapın *

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

İşte parlaklık efekti için basit bir 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
Soru android'de parlayan metin ama web konseptini kullanarak yanıtladınız
eli
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.