android - 如何勾勒一个TextView？

Question

我想做的事？（蓝色将变为白色）在此处输入图像描述

我做了什么？
我找到了一个扩展 TextView 的类，它能够勾勒出非常接近我想要的文本视图。问题是我无法将描边颜色更改为任何颜色，它总是绘制为黑色。如何将边框颜色设置为白色？

我的输出是什么：
在此处输入图像描述

我的代码在哪里？

public class TypeFaceTextView extends TextView {

private static Paint getWhiteBorderPaint(){
    Paint p = new Paint(Color.WHITE);
    return p;
}

private static final Paint BLACK_BORDER_PAINT = getWhiteBorderPaint();

static {
    BLACK_BORDER_PAINT.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
}

@Override
public void setText(CharSequence text, BufferType type) {

    super.setText(String.format(text.toString()), type);
}

private static final int BORDER_WIDTH = 1;

private Typeface typeface;

public TypeFaceTextView(Context context) {
    super(context);
}

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

    setDrawingCacheEnabled(false);

    setTypeface(attrs);
}

private void setTypeface(AttributeSet attrs) {
    final String typefaceFileName = attrs.getAttributeValue(null, "typeface");
    if (typefaceFileName != null) {
        typeface = Typeface.createFromAsset(getContext().getAssets(), typefaceFileName);
    }

    setTypeface(typeface);
}

public TypeFaceTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    setTypeface(attrs);
}

@Override
public void draw(Canvas aCanvas) {
    aCanvas.saveLayer(null, BLACK_BORDER_PAINT, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.MATRIX_SAVE_FLAG);

    drawBackground(aCanvas, -BORDER_WIDTH, -BORDER_WIDTH);
    drawBackground(aCanvas, BORDER_WIDTH + BORDER_WIDTH, 0);
    drawBackground(aCanvas, 0, BORDER_WIDTH + BORDER_WIDTH);
    drawBackground(aCanvas, -BORDER_WIDTH - BORDER_WIDTH, 0);

    aCanvas.restore();
    super.draw(aCanvas);

}

private void drawBackground(Canvas aCanvas, int aDX, int aDY) {
    aCanvas.translate(aDX, aDY);
    super.draw(aCanvas);
}
}

score 2 · Accepted Answer

1）创建你的 textview 对象扩展 TextView

public class YourTextView extends TextView { .........

2）在它的draw方法上这样做

@Override
public void draw(Canvas canvas) {
        for (int i = 0; i < 5; i++) {
        super.draw(canvas);
    }
}

3）如下设置textview的xml端

android:shadowColor="@color/white"
android:shadowRadius="5"

score 2 · Accepted Answer

我找到了简单的方法来概述视图，而无需从TextView继承。我写了一个简单的库，它使用 Android 的Spannable来概述文本。该解决方案提供了仅勾勒部分文本的可能性。

图书馆：大纲跨度

班级（只能复制班级）：OutlineSpan

score 0 · Accepted Answer

不能这样，但尝试尝试：PorterDuff.Mode

http://developer.android.com/reference/android/graphics/PorterDuff.Mode.html

尝试将其更改为“添加”或“清除”，希望这会有所帮助。

score 0 · Accepted Answer

您需要将 getWhiteBorderPaint() 方法更改为以下内容：

private static Paint getWhiteBorderPaint(){
    Paint p = new Paint();
    p.setColor(Color.WHITE);
    return p;
}

Paint 构造函数只接受位掩码标志，不支持任意整数作为参数。

score 0 · Accepted Answer

调查了这个问题所说的原始问题。找到了解决方案。

首先，将 DST_OUT 更改为 DARKEN

static {
    BLACK_BORDER_PAINT.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN));
}

其次，保存原文字颜色，把想要的轮廓颜色上去，画好轮廓，然后恢复原文字颜色。

@Override
public void draw(Canvas aCanvas) {
    int originalColor = this.getCurrentTextColor();
    this.setTextColor(0xff000000); //set it to white.

    aCanvas.saveLayer(null, borderPaint, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.MATRIX_SAVE_FLAG);

        drawBackground(aCanvas, -BORDER_WIDTH, -BORDER_WIDTH);
        drawBackground(aCanvas, BORDER_WIDTH + BORDER_WIDTH, 0);
        drawBackground(aCanvas, 0, BORDER_WIDTH + BORDER_WIDTH);
        drawBackground(aCanvas, -BORDER_WIDTH - BORDER_WIDTH, 0);

    this.setTextColor(originalColor);
    aCanvas.restore();
    super.draw(aCanvas);
}

score 0 · Accepted Answer

具有透明背景的文本轮廓

这是一种没有背景颜色的方法

public class CustomTextView extends androidx.appcompat.widget.AppCompatTextView {

float mStroke;

public CustomTextView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    TypedArray a = context.obtainStyledAttributes(attrs,
            R.styleable.CustomTextView);
    mStroke=a.getFloat(R.styleable.CustomTextView_stroke,1.0f);
    a.recycle();
}

@Override
protected void onDraw(Canvas canvas) {
    TextPaint paint = this.getPaint();
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(mStroke);
    
    super.onDraw(canvas);
}
}

那么你只需要在 attrs.xml 文件中添加以下内容

<declare-styleable name="CustomTextView">
    <attr name="stroke" format="float"/>
</declare-styleable>

现在您将能够设置笔画宽度，app:stroke同时保留 TextView 的所有其他所需属性。我的解决方案只绘制没有填充的笔划。这使它比其他的更简单。在深色背景上为我的 customtextview 设置自定义字体时，在屏幕截图中显示结果。

score 0 · Accepted Answer

我的解决方案基于 custom TextView。

public class TextViewOutline extends TextView{
    int outline_color;
    float outline_width; //relative to font size

    public TextViewOutline( Context context, int outline_color, float outline_width ){
        super( context );
        this.outline_color = outline_color;
        this.outline_width = outline_width;
    }

    @Override
    protected void onDraw( Canvas canvas) {
        //draw standard text
        super.onDraw( canvas );
        //draw outline
        Paint paint = getPaint();
        paint.setStyle( Paint.Style.STROKE );
        paint.setStrokeWidth( paint.getTextSize()*outline_width );
        int color_tmp = paint.getColor();
        setTextColor( outline_color );
        super.onDraw( canvas );
        //restore
        setTextColor( color_tmp );
        paint.setStyle( Paint.Style.FILL );
    }
}

测试代码。

TextViewOutline tv = new TextViewOutline( this, 0xff0080ff, 0.04f);
tv.setText( "Simple TEST" );
tv.setTypeface( Typeface.create( Typeface.SERIF, Typeface.BOLD ) );
tv.setTextColor( 0xff000000 );
tv.setTextSize( 128 );
setContentView(tv);

tv.setOnClickListener( new View.OnClickListener(){
    @Override
    public void onClick( View view ){
        view.invalidate();
    }
} );

结果。

android - 如何勾勒一个TextView？

7 回答 7

Related

Reference