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:
Đã 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:
Tôi có cần một phông chữ đặc biệt cho việc này không?
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:
Đã 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:
Tôi có cần một phông chữ đặc biệt cho việc này không?
Câu trả lời:
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:shadowColor
và thiết lập android:shadowDx
và android:shadowDy
về 0, với một bóng khá lớn android:shadowRadius
?
<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.
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)
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);
}
}
Đâ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>