it-swarm-ja.tech

AndroidのMapViewで枠付きのテキストをどのように描画しますか?

AndroidのMapViewにテキストを描画しようとしています。テキストの描画はうまくいきますが、黒い境界線のない白いものであるため、テキストを読むのは非常に困難です(都市、州、国を示すためにMapViewsに自然に表示される残りのテキストのように)。黒枠のテキストの描き方がわからないようです。誰でもこれを行う方法を知っていますか?

これは、私が現在使用している種類のコードです(これは、オーバーレイの1つにあるサンプルコードにすぎません)。

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

これを行う最も簡単な方法は、ストロークを使用することです...次のようなもの:

@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ピクセルの境界線が描画され、その上にテキストが描画され、輪郭のように見えます。

また、コンストラクタでPaintsを設定してから、それらを再利用することもできます。

65
Jeremy Logan

このコードの代わりに(最初の回答から)

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

同じパスを使用してみてください:

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

よく見える?

19
Oleg

(私の場合はそれであった)十分な場合もあれば十分でない場合もある半解は、影を設定することです。

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

影はテキストを目立たせるのに役立ちますが、黒の境界線ほどよくありません。私はまだ元の質問を解決する方法に興味があります。

11
Dan Lew

これは暗い場所での完全なショットであり、より良い方法があるかもしれませんが、テキストのコピーを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);
2