텍스트를 빛나게하는 방법?


82

아래와 같이 텍스트에 빛나는 효과를 적용 할 수 있습니까?

여기에 이미지 설명 입력

업데이트 됨 : 다음과 같이 만드는 데 필요한 사항도 알려주세요.여기에 이미지 설명 입력

이를 위해 특수 글꼴이 필요합니까?


두 번째 질문을 다른 질문으로 게시해야한다고 생각합니다. 어쨌든, 아마도 그에 대한 사용자 정의 View 클래스가 필요할 것입니다. 맞춤 글꼴로 가능할 수도 있지만보기를 만들고 onDraw () 메서드에서 그림을 처리하는 것이 좋습니다.
Zsombor Erdődy-Nagy 2011

정보를위한 고맙습니다 Scythe하지만 당신이 나에게 무슨 말을하는지 알고 있다면 여기서 질문하지 않을 것입니다. 간단한 문장은 저와 같은 초보자에게는 작동하지 않습니다 ... 그러니 약간의 지원 예제를 제공하거나 참조 할 수있는 링크를 제공하십시오 ...
Farhan

난 당신을 물어 죄송합니다 : 당신이 말해 줄 수있는 첫 번째 그림에서 검색 막대의 레이아웃
pengwang

@pengwang ... hehe .. 저는 Google에서 사진을 복사했습니다. 제가 원하는 것은 사람들에게 빛나는 효과에 대해 물어 보는 것뿐입니다 ... 그리고 그 중심과 레이아웃이 선형
Farhan

답변:


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)와 동일한 결과를 시도 ...
인 Farhan

62
글로우 효과에 대한 질문에 대해 "깨달음"배지를받은 것을 좋아합니다.
Bemmu 2011

배경이 투명한 버튼의 텍스트에 대해이 작업을 수행하는 방법이 있습니까?
lis

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 2014 년

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

그림자 / 광선 효과가 필요한 공간을 늘리기 때문에 패딩을 추가하는 것이 좋습니다.

사용자 정의 글꼴의 경우 자산 폴더에 "fonts"라는 이름의 폴더를 만듭니다. 그런 다음 .ttf 파일을 그 안에 넣으십시오. 온라인으로 .otf 파일을 변환 할 수 있습니다. 웹 사이트가 많이 있습니다.

이것을 당신의 수업에 넣으십시오.

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

그리고 이것은 텍스트 뷰에 글꼴을 설정하는 방법입니다.

yourTextView.setTypeface(myFont);

글로우 효과를 테스트했으며 사용자 정의 글꼴에서도 작동합니다. 사용자 지정 글꼴이 어떤 이유로 더 커지기 때문에 텍스트 크기를 줄여야 할 수도 있습니다. 평소 사용하던 sp 사이즈의 절반을 사용했습니다.


2

Bemmu가 맞습니다. 전체 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
문제는 안드로이드의 텍스트 빛나는되어 있지만 웹 개념을 사용하여 대답 한
엘리
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.