Làm thế nào để làm cho văn bản phát sáng?


82

Chúng ta có thể áp dụng hiệu ứng phát sáng cho bất kỳ văn bản nào như hình dưới đây không:

nhập mô tả hình ảnh ở đây

Đã cập nhật: Vui lòng cho tôi biết những thứ tôi cần để tạo ra một thứ như thế này:nhập mô tả hình ảnh ở đây

Tôi có cần một phông chữ đặc biệt cho việc này không?


Tôi nghĩ bạn nên đăng câu thứ hai như một câu hỏi khác. Dù sao, bạn có thể cần một lớp View tùy chỉnh cho lớp đó. Có thể nó có thể với các phông chữ tùy chỉnh, nhưng tôi khuyên bạn nên tạo Chế độ xem cho nó và xử lý bản vẽ trong phương thức onDraw ().
Zsombor Erdődy-Nagy

Thanx để biết thông tin Scythe nhưng nếu tôi biết những gì bạn đang nói với tôi, tôi sẽ không đặt câu hỏi ở đây. những câu đơn giản sẽ không hoạt động đối với người mới bắt đầu như tôi ... Vì vậy, vui lòng giải thích một chút cho một số ví dụ hỗ trợ hoặc ít nhất là một liên kết để tham khảo ...
Farhan

tôi xin lỗi để yêu cầu bạn ở đây: bạn có thể cho tôi biết những gì bố cục của seekbar trong pic đầu tiên của bạn
pengwang

@pengwang ... hehe .. tôi chỉ cần sao chép các hình ảnh từ google, chỉ có điều tôi muốn là để hỏi bạn về người sáng tác ... và tôi nghĩ rằng trọng tâm của nó và bố trí có thể tuyến tính ...
Farhan

Câu trả lời:


122

Làm thế nào về việc thiết lập bóng xanh cho chế độ xem văn bản bằng cách sử dụng android:shadowColorvà thiết lập android:shadowDxandroid:shadowDyvề 0, với một bóng khá lớn android:shadowRadius?


1
Tôi sử dụng cái này nhưng không có tác dụng ... xml là: <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 "/> also cố gắng 210 ... kết quả tương tự ...
Farhan

61
Rất thích vì tôi đã nhận được huy hiệu "khai sáng" cho câu hỏi về hiệu ứng phát sáng.
Bemmu

có cách nào để làm điều này cho văn bản trên các nút có nền trong suốt không?
lis

1
Xin chào @Bemmu Tôi đã cung cấp <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>. Nhưng nó không hiển thị bóng tối hơn .. Những gì tôi muốn là bóng tối hơn pbs.twimg.com/media/BnqtvaaIAAAVU8y.jpg Những gì tôi có thể tạo ra bây giờ là pbs.twimg.com/media/Bnqqk03IYAAGA1U.png Vui lòng giúp tôi cách làm làm cho bóng tối tối hơn
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" />

Tôi khuyên bạn nên thêm một phần đệm, vì hiệu ứng bóng / sáng làm tăng không gian cần thiết.

Đối với phông chữ tùy chỉnh, hãy tạo một thư mục với tên "phông chữ" trong thư mục nội dung của bạn. Sau đó, đặt các tệp .ttf của bạn vào bên trong nó. Bạn có thể chuyển đổi tệp .otf trực tuyến có rất nhiều trang web.

Đặt cái này vào Lớp học của bạn

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

và đây là cách bạn đặt phông chữ cho chế độ xem văn bản của mình

yourTextView.setTypeface(myFont);

tôi đã thử nghiệm hiệu ứng ánh sáng và nó cũng hoạt động với các phông chữ tùy chỉnh. Hãy nhớ rằng bạn có thể phải giảm kích thước văn bản của mình vì phông chữ tùy chỉnh vì một lý do nào đó sẽ lớn hơn. Tôi đã sử dụng một nửa kích thước sp mà tôi thường sử dụng.


2

Bemmu nói đúng. Đó là cách tốt nhất cho đến nay mà không cần đi theo lộ trình OpenGL đầy đủ. Bạn cũng muốn đảm bảo rằng TextView có một bộ đệm màu xanh nước ở mỗi bên, nếu không bóng đổ bán kính lớn phù hợp với màu văn bản gốc (hoặc bóng sáng hơn một chút) sẽ hiển thị phần cắt nhỏ giọt ở mỗi bên của TextView.

Bạn thậm chí có thể đạt được nhiều hiệu ứng mờ hơn nữa bằng cách tạo một nhóm chế độ xem nhiều lớp với các hiệu ứng giọt bóng tăng / giảm (tuy nhiên, không chắc chắn hiệu ứng hiển thị sẽ như thế nào)


1

Tôi đã có một cách giải quyết để đạt được yêu cầu, nhưng vẫn chưa hoàn hảo ....

Kết quả mẫu:

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

Điểm chính: * Đưa ra một bức tranh và vẽ tám lần onDraw()từ 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

Đây là một css3 đơn giản cho hiệu ứng ánh sáng

.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
Câu hỏi là văn bản phát sáng trong Android nhưng bạn đã trả lời bằng cách sử dụng khái niệm web
eli
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.