टेक्स्ट ग्लो कैसे करें?


82

क्या हम नीचे दिखाए गए किसी भी पाठ पर चमक प्रभाव लागू कर सकते हैं:

यहां छवि विवरण दर्ज करें

अपडेट किया गया: कृपया मुझे यह भी बताएं कि मुझे कुछ ऐसी चीजें बनाने की क्या आवश्यकता है:यहां छवि विवरण दर्ज करें

क्या मुझे इसके लिए एक विशेष फ़ॉन्ट की आवश्यकता है?


मुझे लगता है कि आपको दूसरे प्रश्न के रूप में दूसरा पोस्ट करना चाहिए। वैसे भी, आप शायद एक के लिए एक कस्टम दृश्य वर्ग की जरूरत है। शायद यह कस्टम फोंट के साथ संभव है, लेकिन मैं इसके लिए एक व्यू बनाने और ऑनड्राइव () विधि में ड्राइंग को संभालने की सलाह देता हूं।
ज़ोम्सर एर्दोदी-नेगी

जानकारी के लिए Thanx Scythe लेकिन अगर मुझे पता था कि आप मुझे क्या बता रहे हैं, तो मैं यहां सवाल नहीं पूछूंगा। मेरे जैसे शुरुआती लोगों के लिए आसान वाक्य नहीं है ... तो कृपया कुछ समझाने के लिए उदाहरण दें या कम से कम एक लिंक दें ...
फरहान

मुझे आपसे यहाँ पूछने के लिए खेद है: क्या आप मुझे बता सकते हैं कि आपकी पहली तस्वीर में
साकबर

@ पेंगवांग ... हेहे .. मैं सिर्फ गूगल से तस्वीरों को कॉपी करता हूं, केवल एक चीज जो मैं चाहता हूं कि आप लोगों से चमक प्रभाव के बारे में पूछें ... और मुझे लगता है कि इसका केंद्र और लेआउट रैखिक हो सकता है ...
फरहान

जवाबों:


122

कैसे का उपयोग करके TextView के लिए एक नीले रंग की छाया करने के बारे में android:shadowColorऔर स्थापित करने android:shadowDxऔर android:shadowDyएक बहुत बड़ी के साथ शून्य करने के लिए, android:shadowRadius?


1
मैं इसका उपयोग करता हूं लेकिन कोई प्रभाव नहीं ... xml है: <TextView android: layout_width = "wra_content" Android: layout_height = "wra_content" Android: पाठ = "ग्लो" 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
प्यार कि मुझे चमक प्रभाव के बारे में एक सवाल के लिए "प्रबुद्ध" बैज मिला।
बेमू जूल

वहाँ पारदर्शी पृष्ठभूमि के साथ बटन पर पाठ के लिए ऐसा करने का एक तरीका है?
फूल

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 </ आइटम> </ code>। लेकिन यह गहरा छाया नहीं दिखा रहा है .. मैं जो चाहता हूं वह गहरा छाया है pbs.twimg.com/media/BnqtvaaIAAAVU8y.jpg अब मैं जो उत्पादन करने में सक्षम हूं वह है pbs.twimg.com/bia/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);

मैंने चमक प्रभाव का परीक्षण किया है और यह कस्टम फोंट के साथ भी काम करता है। ध्यान रखें कि आपको शायद अपने पाठ का आकार कम करना होगा क्योंकि कस्टम फोंट किसी कारण से बड़े हैं। मैं सपा आकार के आधे का उपयोग करता था जो कि मैं सामान्य रूप से उपयोग करता था।


2

बेमू सही है। पूर्ण OpenGL मार्ग जाने के बिना दूर से सबसे अच्छा तरीका है। आप यह भी सुनिश्चित करना चाहते हैं कि 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 Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.