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

How do you draw text with a border on a MapView in Android?

提问by Dan Lew

I'm trying to draw some text onto an MapView on Android. The drawing of the text goes fine, but it's very hard to read the text because it's white with no black border (like the rest of the text that appears naturally on MapViews to denote cities, states, and countries). I can't seem to figure how to draw the text with a black border. Anyone know how to do this?

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

This is the sort of code I'm using right now (this is just example code, found in one of my overlays):

这是我现在使用的那种代码（这只是示例代码，可以在我的一个叠加层中找到）：

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

回答by Jeremy Logan

The easiest way to do this is with a Stroke... something like this:

最简单的方法是使用 Stroke ......像这样：

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

This will draw a border of 2 pixels around the outside of the text then draw the text over the top of it, giving you the illusion of an outline.

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

Also, it may be worth setting the Paints up in the constructor then just reusing them.

此外，在构造函数中设置 Paints 然后重用它们可能是值得的。

回答by Oleg

Instead of this code (from the first answer)

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

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

try to use the same with Path:

尝试对 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);

looks better?

看起来更好？

回答by Dan Lew

The half-answer, which may or may not be good enough (it was in my case), is to set a shadow:

一半的答案，可能不够好，也可能不够好（在我的情况下），是设置一个阴影：

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

The shadow helps the text stand out a lot, but isn't quite as good as a black border would be. I'm still curious how to solve the original question.

阴影有助于文本突出很多，但不如黑色边框那么好。我仍然很好奇如何解决原始问题。

回答by Aleksander Kmetec

This is a complete shot in the dark and there might be a better way, but if you create 4 copies of the text, set their color to black, then shift each layer by 1 pixel diagonally, it would create an illusion of a border. So if your text is positioned at [100,100], the 4 shadows would need to be positioned at [99,99], [99,101], [101,99] and [101,101], like this:

这是在黑暗中拍摄的完整照片，可能有更好的方法，但如果您创建 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);