アンドロイドのDrawTextのキャンバス()とテキスト中心のアプローチ

カスタムビューは三つの方法があるテキストを描画です。

// 第一类
public void drawText (String text, float x, float y, Paint paint)
public void drawText (String text, int start, int end, float x, float y, Paint paint)
public void drawText (CharSequence text, int start, int end, float x, float y, Paint paint)
public void drawText (char[] text, int index, int count, float x, float y, Paint paint)

// 第二类
public void drawPosText (String text, float[] pos, Paint paint)
public void drawPosText (char[] text, int index, int count, float[] pos, Paint paint)

// 第三类
public void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)
public void drawTextOnPath (char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

説明:

  • drawText():最も一般的な
  • drawPosText():指定された文字の位置によると座標点
  • drawTextOnPath():パスが描かれています。

x、yパラメータのどちらのDrawText()は、それをしているのですか?


次のコードの業績を初めて目:

@Override
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	Paint paint=new Paint();
	paint.setStyle(Paint.Style.FILL);
	paint.setStrokeWidth(12);
	paint.setTextSize(100);

	String text="测试:my text";
	canvas.drawText(text, 200, 400, paint);

	//画两条线标记位置
	paint.setStrokeWidth(4);
	paint.setColor(Color.RED);
	canvas.drawLine(0, 400, 2000, 400, paint);
	paint.setColor(Color.BLUE);
	canvas.drawLine(200, 0, 200, 2000, paint);
}

左-left

左-left

見ることができる、xは、指定されたテキストのY位置が中点ではなく、X、Yおよび関連テキストの整列(SetTextAlign()が指定されていることにより、デフォルトのままです)


合わせ-center

合わせ-center

右揃え右回転

右揃え右回転

注:フルテキストは、X、Yの上記の値を調整します。


これは、3例の上方から結論垂直に対応するX:

  • 左对齐 - 左ボーダーのテキスト
  • 居中对齐 - テキストの中心位置
  • 右对齐 - 左ボーダーのテキスト

テキストの下側境界にYの対応は、水平ではなく、基準線ベースライン

ここに画像を挿入説明

  • Top:トップほとんどのテキスト
  • Baseline:ベースライン
  • Bottom:ボトムテキスト

どのようにこれらの値は、それを得ることを?

	Paint.FontMetrics fontMetrics=paint.getFontMetrics();
	fontMetrics.top
	fontMetrics.ascent
	fontMetrics.descent
	fontMetrics.bottom

それが肯定降下と底、上部、および負の上昇である下に、テキストのサイズ、幅及び特性及び0に対応し、次いで、ベースラインザ対応する値等を設定した後、ペイントフォントメトリックスを取得するために覚えています。

そのテキストの高さ: bottom - top

ここに画像を挿入説明
したがって、実際の描画は、テキストを描画し、ポイント三の左、中央、右に対応するための基準点に依存します。

ここに画像を挿入説明
まあ、xののDrawText()は、yパラメータはクリアテキストが中央で達成することは容易です。

直接コードに:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
	//矩形背景
	Paint bgRect=new Paint();
	bgRect.setStyle(Paint.Style.FILL);
	bgRect.setColor(Color.YELLOW);
	RectF rectF=new RectF(200, 200, 800, 600);
	canvas.drawRect(rectF, bgRect);

	Paint textPaint=new Paint();
	textPaint.setStyle(Paint.Style.FILL);
	textPaint.setStrokeWidth(8);
	textPaint.setTextSize(50);
	textPaint.setTextAlign(Paint.Align.CENTER);

	String text="测试:my text";
	//计算baseline
	Paint.FontMetrics fontMetrics=textPaint.getFontMetrics();
	float distance=(fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom;
	float baseline=rectF.centerY()+distance;
	canvas.drawText(text, rectF.centerX(), baseline, textPaint);
}

効果:
ここに画像を挿入説明
中央に位置合わせは、そのメイクテキストが中心に、xの値は、矩形の中央のx値、yの値を算出するfacie図ベースラインです。
ここに画像を挿入説明
y = 矩形中心y值 + 矩形中心与基线的距离

距离 = 文字高度的一半 - 基线到文字底部的距离(也就是bottom)
     = (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom
公開された100元の記事 ウォン称賛45 ビュー640 000 +

おすすめ

転載: blog.csdn.net/wangzhongshun/article/details/95341444