Cách hiển thị văn bản có nền hai màu?

Question

Tôi cần tạo ứng dụng cho android, nơi văn bản 2 màu sẽ được hiển thị trên nền 2 màu. Xem hình bên trái. Sau đó, các dòng nên được di chuyển với hình ảnh động và hình ảnh kết quả nên giống như trên hình ảnh bên phải.

Tôi có câu hỏi sau:

1. Tôi có nên sử dụng một số công cụ 2d để làm điều này? Hoặc, bạn có thể sử dụng chế độ xem chuẩn không? Làm thế nào để làm nó?
2. Làm cách nào để vẽ văn bản như trên hình ảnh?

---------

Answer 1

Đây không phải là câu trả lời hoàn chỉnh tôi chỉ đưa ra gợi ý. Tôi biết một giải pháp có thể làm thế nào bạn có thể làm hình ảnh bên trái và hình ảnh bên phải. Nhưng phần tôi không thể tìm ra là hình ảnh động. Ý tôi là nếu bạn muốn hoạt hình mượt mà giữa các tiểu bang. Nếu bạn chỉ muốn trao đổi lượt xem dễ dàng, chỉ cần xem một cái nhìn và nó, nhưng tôi không nghĩ rằng bạn muốn đạt được điều đó ...

Một trong những điều bạn có thể làm là đặt nền cho phép nói với chiều rộng 320 và giả sử 0-160 trắng và 160-320 màu đen. Sau đó

tv.setText(Html.fromHtml("<font color='black'>black on white</font> <font color='white'>white on black</font>")); 

tất nhiên bạn sẽ cần phải làm tính toán chính xác có bao nhiêu chữ sẽ có màu đen và có bao nhiêu màu trắng, nhưng đó là khái niệm

Answer 2

Trong đồ họa AndroidAPI tôi sẽ sử dụng kẹp đường dẫn để tạo vùng clip. bước:

• điền vải với màu đen:

• vẽ văn bản màu trắng của bạn trên vải:

• tạo đường clip và áp dụng nó vào canvas của bạn (xem Canvas.clipPath(Path))
• điền vải với màu trắng:

• vẽ văn bản tương tự như trong bước 2 màu đen trên vải :

Answer 3

Bạn có thể tạo chế độ xem tùy chỉnh che dấu văn bản của bạn bằng bộ lọc PorterDuff.

Sau đây là cách nó có thể xem xét:

public class MaskedText extends View { 

    String sText; 
    Paint p, pReplace, pMask; 

    public MaskedText(Context context, AttributeSet attrs) { 
     super(context, attrs); 

     // base paint for you text 
     p = new Paint(Paint.ANTI_ALIAS_FLAG); 
     p.setTextSize(40); 
     p.setTextAlign(Paint.Align.CENTER); 
     p.setColor(0xFF000000); 
     p.setStyle(Paint.Style.FILL); 

     // replacement color you want for your the part of the text that is masked 
     pReplace = new Paint(p); 
     pReplace.setColor(0xFFFFFFFF); 
     pReplace.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER)); 

     // color of the drawing you want to mask with text 
     pMask = new Paint(); 
     pMask.setColor(0xFFFF0000); 
     pMask.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); 
    } 

    public void setText(String text) { 
     sText = text; 
    } 

    @Override 
    public void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 

     canvas.save(); 

     // here you draw the text with the base color. In your case black 
     canvas.drawText(sText, getWidth()/2, getHeight()/2, p); 

     // then draw the shape any graphics that you want on top of it 
     canvas.drawCircle(getWidth()/2, getHeight()/2, 50, pMask); 
     canvas.drawCircle(getWidth()/2 + 50, getHeight()/2 + 5, 20, pMask); 
     canvas.drawCircle(getWidth()/2 - 45, getHeight()/2 - 10, 30, pMask); 

     // finally redraw the text masking the graphics 
     canvas.drawText(sText, getWidth()/2, getHeight()/2, pReplace); 

     canvas.restore(); 
    } 
} 

Đây là kết quả: Masked text