Como você desenha o texto com uma borda em um MapView no Android?

Question

Estou tentando desenhar algum texto em um MapView no Android. O desenho do texto vai bem, mas é muito difícil ler o texto, porque é branco sem borda preta (como o restante do texto que aparece naturalmente no MapViews para denotar cidades, estados e países). Não consigo descobrir como desenhar o texto com uma borda preta. Alguém sabe como fazer isto?

Esse é o tipo de código que estou usando agora (este é apenas um código de exemplo, encontrado em uma das minhas sobreposições):

@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
    Paint textPaint = new Paint();
    textPaint.setARGB(255, 255, 255, 255);
    textPaint.setTextAlign(Paint.Align.CENTER);
    textPaint.setTextSize(16);
    textPaint.setTypeface(Typeface.DEFAULT_BOLD);

    canvas.drawText("Some Text", 100, 100, textPaint);

    super.draw(canvas, mapView, shadow);
}

Answer 1

A maneira mais fácil de fazer isso é com um golpe ... algo assim:

@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
    Paint strokePaint = new Paint();
    strokePaint.setARGB(255, 0, 0, 0);
    strokePaint.setTextAlign(Paint.Align.CENTER);
    strokePaint.setTextSize(16);
    strokePaint.setTypeface(Typeface.DEFAULT_BOLD);
    strokePaint.setStyle(Paint.Style.STROKE);
    strokePaint.setStrokeWidth(2);

    Paint textPaint = new Paint();
    textPaint.setARGB(255, 255, 255, 255);
    textPaint.setTextAlign(Paint.Align.CENTER);
    textPaint.setTextSize(16);
    textPaint.setTypeface(Typeface.DEFAULT_BOLD);

    canvas.drawText("Some Text", 100, 100, strokePaint);
    canvas.drawText("Some Text", 100, 100, textPaint);

    super.draw(canvas, mapView, shadow);
}

Isso atrairá uma borda de 2 pixels ao redor do texto e depois desenhará o texto por cima, dando a você a ilusão de um contorno.

Além disso, pode valer a pena definir as tintas no construtor e apenas reutilizá -las.

Answer 2

Em vez deste código (desde a primeira resposta)

canvas.drawText("Some Text", 100, 100, strokePaint);
canvas.drawText("Some Text", 100, 100, textPaint);

Tente usar o mesmo com o caminho:

Path path = new Path();
String text = "Some Text";
tp.getTextPath(text, 0, text.length(), 0, 100, path);
canvas.drawPath(path, strokePaint);
canvas.drawPath(path, textPaint);

parece melhor?

Answer 3

A meia-resposta, que pode ou não ser boa o suficiente (foi no meu caso) é definir uma sombra:

textPaint.setShadowLayer(3, 0, 0, Color.BLACK);

A sombra ajuda o texto a se destacar muito, mas não é tão bom quanto uma borda preta. Ainda estou curioso para saber como resolver a pergunta original.

Answer 4

Esta é uma foto completa no escuro e pode haver uma maneira melhor, mas se você criar 4 cópias do texto, defina sua cor para preto e depois deslocar cada camada em 1 pixel na diagonal, criaria uma ilusão de uma borda. Portanto, se o seu texto estiver posicionado em [100.100], as 4 sombras precisariam ser posicionadas em [99,99], [99,101], [101,99] e [101,101], como este:

canvas.drawText("Some Text", 99, 99, borderPaint);
canvas.drawText("Some Text", 99, 101, borderPaint);
canvas.drawText("Some Text", 101, 99, borderPaint);
canvas.drawText("Some Text", 101, 101, borderPaint);

canvas.drawText("Some Text", 100, 100, textPaint);