如何在 Android 的 MapView 上绘制带边框的文本？

Question

我正在尝试在 Android 上的 MapView 上绘制一些文本。文本的绘制很顺利，但是很难阅读文本，因为它是白色的，没有黑色边框（就像地图视图上自然出现的表示城市、州和国家的文本的其余部分一样）。我似乎不知道如何绘制带有黑色边框的文本。有人知道该怎么做吗？

这是我现在正在使用的代码（这只是示例代码，可以在我的一个覆盖层中找到）：

@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

最简单的方法是使用描边...类似这样：

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

这将在文本外部绘制 2 个像素的边框，然后将文本绘制在其顶部，给您一种轮廓的错觉。

另外，可能值得在构造函数中设置 Paint，然后重用它们。

Answer 2

而不是此代码（来自第一个答案）

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

尝试使用与 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);

看起来更好？

Answer 3

半答案，可能足够好，也可能不够好（就我而言），是设置阴影：

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

阴影有助于文本脱颖而出，但不如黑色边框那么好。我仍然很好奇如何解决最初的问题。

Answer 4

这是在黑暗中拍摄的完整照片，可能有更好的方法，但如果您创建 4 个文本副本，将它们的颜色设置为黑色，然后将每个图层对角线移动 1 个像素，则会产生边框的错觉。因此，如果您的文本位于 [100,100]，则 4 个阴影需要位于 [99,99]、[99,101]、[101,99] 和 [101,101]，如下所示：

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