web-dev-qa-db-fra.com

Comment dessiner du texte avec une bordure sur une MapView dans Android?

J'essaie de dessiner du texte sur une MapView sur Android. Le dessin du texte se passe bien, mais il est très difficile de le lire car il est blanc sans bordure noire (comme le reste du texte qui apparaît naturellement sur MapViews pour désigner les villes, les États et les pays). Je n'arrive pas à comprendre comment dessiner le texte avec une bordure noire. Quelqu'un sait-il comment faire ça?

C'est le genre de code que j'utilise en ce moment (ce n'est qu'un exemple de code, trouvé dans l'une de mes superpositions):

@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);
}
androidgoogle-mapsandroid-mapview
34
Dan Lew

La façon la plus simple de le faire est avec un AVC ... quelque chose comme ceci:

@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);
}

Cela dessinera une bordure de 2 pixels autour de l'extérieur du texte, puis dessinera le texte par-dessus, vous donnant l'illusion d'un contour.

En outre, il peut être utile de configurer les peintures dans le constructeur, puis de les réutiliser.

65
Jeremy Logan

Au lieu de ce code (de la première réponse)

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

essayez d'utiliser la même chose avec Path:

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

regarde mieux?

19
Oleg

La demi-réponse, qui peut ou non être assez bonne (c'était dans mon cas), est de mettre une ombre:

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

L'ombre aide le texte à se démarquer beaucoup, mais n'est pas aussi bonne qu'une bordure noire. Je suis toujours curieux de savoir comment résoudre la question d'origine.

11
Dan Lew

Il s'agit d'une prise de vue complète dans l'obscurité et il pourrait y avoir une meilleure façon, mais si vous créez 4 copies du texte, définissez leur couleur sur noir, puis déplacez chaque calque de 1 pixel en diagonale, cela créerait l'illusion d'une bordure. Donc, si votre texte est positionné à [100,100], les 4 ombres devraient être positionnées à [99,99], [99,101], [101,99] et [101,101], comme ceci:

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);
2
Aleksander Kmetec